В статье описывается, как оформить таблицу с красивыми тонкими черными линиями. Основная идея - фон всей таблицы делается черным, толщина рамок выставляется равной нулю, и фон строк таблицы делается белым.

Итак, процесс по шагам (на примере работы в Macromedia Dreamweaver 8):

1. Рисуем каркас таблицы. Предположим, что нам нужно сделать таблицу с 2 столбцами и 4 строками. Идем в меню Insert\Table, выбираем Rows: 4 и Columns: 2, Border thickness (толщину рамки): 0, Cell padding: 3, Cell spacing: 1. Жмем ОК.

2. Немножко по поводу ширины таблицы. Она бывает двух разновидностей - в пикселах и в процентах. По умолчанию Dreamweaver делает таблицу в пикселах, шириной в 200 пикселов. Смотрим полученный html-код (переключиться к коду меню View\Code или просто Ctrl+`), теги body и html я опускаю:

< table width="200" border="0" cellspacing="1" cellpadding="3">
  < tr>
    < th scope="col"> < /th>
    < th scope="col"> < /th>
  < /tr>
  < tr>
    < td> < /td>
    < td> < /td>
  < /tr>
  < tr>
    < td> < /td>
    < td> < /td>
  < /tr>
  < tr>
    < td> < /td>
    < td> < /td>
  < /tr>
< /table>

Без сомнений, ширину таблицы задает атрибут width="200" тега table. Width в пикселах задает таблицу фиксированного размера. Это удобно для веб-страниц с фиксированным дизайном - у такой таблицы размеры не будут меняться в зависимости от размера рабочего поля браузера (если таблица не влезет, то в браузере появится горизонтальная полоса прокрутки).

Иногда удобно задавать ширину таблицы в процентах от ширины рабочего поля окна браузера. В этом случае при изменении размеров окна браузера будет также меняться размер таблицы. Предположим, что мы захотели изменить тип ширины, на процентный, и установить её на 80% относительно окна браузера. Это удобно делать в режиме дизайна страницы (меню View\Design или просто Ctrl+`), и стандартном режиме редактирования таблиц (View\Table Mode\Standard Mode, кроме того, кнопка F6 циклически меняет режим). Щелкаем мышкой сверху таблицы, тем самым мы её выбираем целиком. В нижней части окна Dreamweaver появится область свойств таблицы Properties, где можно выбрать тип ширины таблицы W в пикселах или %, а также её величину. Ставим эту величину на 80% (см. скриншот).

Теперь в коде тег table будет таким:

< table width="80%" border="0" cellspacing="1" cellpadding="3">
  ..

3. Делаем фон всей таблицы черным (см. скриншот).

Теперь в код тега table будет таким (добавился атрибут цвета фона

< table width="80%" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
  ..

4. Теперь наша задача сделать фон строк белым. Для этого выделяем не саму таблицу, а её строки. Для этого подводим курсор мыши к левой границе верхней левой ячейки таблицы, чтобы появилась черная стрелка, направленная вправо, потом удерживаем левую кнопку мыши и опускаем курсор вниз, пока не выделятся все строки. У нашего выделения появится свои свойства, где можно изменить цвет фона на белый (см. скриншот).

Полный код полученной таблицы:

< table width="80%" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
  < tr bgcolor="#FFFFFF">
    < th scope="col">< strong>Заголовок 1 < /strong>< /th>
    < th scope="col">< strong>Заголовок 2 < /strong>< /th>
  < /tr>
  < tr bgcolor="#FFFFFF">
    < td>текст 1 < /td>
    < td> текст 4 < /td>
  < /tr>
  < tr bgcolor="#FFFFFF">
    < td>текст 2 < /td>
    < td>текст 5 < /td>
  < /tr>
  < tr bgcolor="#FFFFFF">
    < td>текст 3 < /td>
    < td>текст 6 < /td>
  < /tr>
< /table>

Здесь тег tr задает строки таблицы, и цвет фона у них задан белым (< tr bgcolor="#FFFFFF">). Столбцы заданы тегами th (для заголовка) и td (для простой строки). Можно обойтись одним тегом td, тогда все ячейки будут иметь одинаковый формат. Внешний вид таблицы будет таким:

Осталось заметить, что можно задать width у столбцов (внутри тега td), опять-таки либо в пикселах, либо в процентах. Величина в процентах будет взята от ширины таблицы.

[Влияние тегов div align и p align на внешний вид таблицы]

< div align="center">текст < /div>

Внутри столбца ячейки таблицы этот тег приводит к тому, что "текст" располагается посередине между верхней и нижней линией бордюрчика таблицы БЕЗ ПРОПУСКА свободного места (таблица получается маленькой по высоте). Если этим тегом div обрамить таблицу целиком, то она располагается с выравниванием по центру по горизонтали на странице.

< p align="center">текст< /p>

Внутри столбца ячейки таблицы этот тег приводит к тому, что "текст" располагается посередине между верхней и нижней линией бордюрчика таблицы. При этом сверху над текстом и снизу под текстом образуются пропуски свободного места (таблица получается большой по высоте).

[Таблица с разделением строк горизонтальными линиями]

Атрибут rules позволяет задавать наличие линий в таблице. В этом примере значение атрибута "rows" задает в таблице разделение строк горизонтальными линиями. Пример:

< table rules="rows">
    < tbody>
        < tr>
            < td nowrap="nowrap">< strong>/etc/profile
            < td width="5">RHL,< br /> FBSD< /td>
            < td>Системные настройки окружения.< /td>
        < /tr>
        < tr>
            < td nowrap="nowrap">< strong>/dev/MAKEDEV< /strong>< /td>
            < td width="5">RHL< /td>
            < td>Скрипт создает файлы локальных устройств или ссылки на них.< /td>
        < /tr>
        < tr>
            < td nowrap="nowrap">< strong>/etc/aliases< /strong>< /td>
            < td width="5">RHL,< br /> FBSD< /td>
            < td>Псевдонимы имен пользователей.< /td>
        < /tr>
    < /tbody>
< /table>

Выглядит это так:

Атрибут rules поддерживается браузерами Internet Explorer 9+, Firefox, Opera, Chrome и Safari (IE 8 и более старые версии этот тег не поддерживает). Safari (и иногда Chrome) могут некорректно отображать таблицу с атрибутом rules: добавляются внешние линии в дополнение к внутренним. Атрибут rules не поддерживается в HTML5, вместо него используйте CSS. Поэтому из практических соображений лучше не указывать атрибут rules, и использовать для оформления таблиц CSS. Другие возможные значения атрибута rules показаны в таблице.

[Ссылки]

1. HTML < table > Tag site:w3schools.com.
2. Пример 1: таблица, где строки отделены друг от друга горизонтальными черными линиями.
3. Пример 2: все ячейки отделены друг от друга тонкими черными линиями и по горизонтали, и по вертикали.