Готовый эффект следующий:
2. Используйте атрибуты темной границы (bordercolordark) и светлой границы (bordercolorlight) таблицы, чтобы создать таблицу с тонкими линиями:
Или нажмите Ctrl+Alt+T, чтобы вставить таблицу, и установите ее так, как показано в диалоговом окне (элементы с красными рамками зафиксированы, иначе они не будут иметь никакого эффекта).
После выбора таблицы нажмите F9, чтобы развернуть группу панелей «Инспектор тегов» и установить настройки на панели «Атрибуты», как показано ниже:
После завершения это выглядит так:
3. Установите для атрибута CSS border-collapse значение «Свернуть». Нажмите Ctrl+Alt+T, чтобы вставить таблицу. Настройка диалогового окна аналогична методу 2. Выберите таблицу и установите цвет границы таблицы на панели свойств:
Нажмите F9, чтобы развернуть панель «Инспектор тегов», и введите «border-collapse:collapse;» в поле «style» на панели «Атрибуты».
После завершения это выглядит так:
Примечание. Таблица тонких линий, созданная методом 3, подходит только для IE5+. Наиболее совместимым методом является метод 1. Метод 2 не является таблицей тонких линий в строгом смысле этого слова.
Совет: В методе 1 вы можете использовать CSS для определения цвета фона ячеек таблицы, чтобы уменьшить объем кода:
<стиль>
.thin{background:#000000}
.thin td{background:#FFFFFF}
</стиль>
<table width="200" border="0" cellpacing="1" cellpadding="0" class="thin">
<тр>
<тд> </тд>
<тд> </тд>
<тд> </тд>
</tr>
<тр>
<тд> </тд>
<тд> </тд>
<тд> </тд>
</tr>
<тр>
<тд> </тд>
<тд> </тд>
<тд> </тд>
</tr>
</таблица>