html теги. Теги table, thead, tbody, th, tr и td. Таблицы в html - css
Web-разработки, реклама и информация
[06-03-2009] Джо
Согласно принципам простой верстки сайта блоками div, таблицам на web-страницах возвращается их изначальная роль - отображение табличной информации. А позиционирование элементов сайта с помощью таблиц занимает свое почетное место на свалке истории ;0).
Поскольку таблица - составной визуальный элемент сайта, состоящий из нескольких html тегов, логично сперва привести ее основу, "каркас" в сборе, а затем дать пояснения по использованным тегам.
<table>
<thead>
<tr><th>текст заголовка</th>...<th>текст заголовка</th></tr>
...
<tr><th>текст заголовка</th>...<th>текст заголовка</th></tr>
</thead>
<tbody>
<tr><td>текст ячейки</td>...<td>текст ячейки</td></tr>
...
<tr><td>текст ячейки</td>...<td>текст ячейки</td></tr>
</tbody>
</table>
Теги по вложенности:
table - таблица;
thead - заголовочная часть таблицы. Тег имеет смысл, если к заголовочной части нужно привязать свой стиль css. Не обязателен;
tbody - "тело" таблицы или его часть. Тег имеет смысл, если к телу (части тела) таблицы нужно привязать свой стиль css. Не обязателен;
tr - строка таблицы;
th - ячейка таблицы - заголовок. Не обязателен;
td - ячейка таблицы.
Специфических свойств css для таблиц всего два. Имеет смысл упомянуть свойство border-collapse, связанное с отображением рамки таблицы. Это свойство имеет 2 значения:
collapse - линия между ячейками таблицы отображается только одна;
separate - вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек таблицы показываются сразу две линии (по умолчанию).
<table>
<thead><tr><th colspan="2">Поход на байдарках по островам Выборгского залива - 125 км</th></tr></thead>
<tbody>
<tr><th>День</th><th>Программа</th></tr>
<tr><th class="sub">1 день</th><td>г.Выборг - остров Большой Щит - 15 км</td></tr>
<tr><th class="sub">2 день</th><td>остров Большой Щит - остров Подберезовый - 15 км</td></tr>
<tr><th class="sub">3 день</th><td>остров Подберезовый - остров Кубенский - 25 км</td></tr>
<tr><th class="sub">4 день</th><td>остров Кубенский - полуостров Киперот (или остров Лисий) - 25 км</td></tr>
<tr><th class="sub">5 день</th><td>Полуостров Киперот (или остров Лисий) - днёвка</td></tr>
<tr><th class="sub">6 день</th><td>Полуостров Киперот (или остров Лисий) - остров Высоцкий - 15 км</td></tr>
<tr><th class="sub">7 день</th><td>остров Высоцкий - остров Большой Щит - 15 км</td></tr>
<tr><th class="sub">8 день</th><td>остров Большой Щит - г.Выборг - 15 км</td></tr>
</tbody>
</table>
а стили css для этой таблицы могут выглядеть так:
table {border: 2px solid #900;border-collapse:collapse;width:100%}
table td {background: #fff url("/im/sprites.gif") repeat-x 0 -1600px;padding:3px;border: 1px solid #fff}
table th {text-align:left;border: 1px solid #fff}
table thead th {color:#fff;font-size:110%;background: #900 url("/im/sprites.gif") repeat-x 0 -1300px;padding: 4px 6px}
table tbody th {color:#fff;font-size:110%;background: #88b8db url("/im/sprites.gif") repeat-x 0 -1400px;padding: 3px}
table tbody th.sub {font-size:100%;color:#000;background: #efefef url("/im/sprites.gif") repeat-x 0 -1500px;padding: 3px}
