Элементы thead, tbody и tfoot

Элементы thead, tbody и tfoot позволяют более строго задать структуру описания таблицы, выделяя группы строк, содержащие соответственно заголовочную часть таблицы, основное содержимое таблицы и итоговую строку или строки. Эти элементы могут встречаться только в описании таблиц внутри контейнера <table>…</table>.

Контейнеры <thead>…</thead> и <tfoot>…</tfoot> можно использовать для описания верхнего и нижнего колонтитулов таблицы. Эти контейнеры могут встречаться в таблице не более одного раза. Использование данных элементов удобно при создании больших таблиц, выходящих за пределы одной страницы.

Контейнер <tbody>…</tbody> может встречаться многократно в описании таблицы. Этот контейнер выполняет логическое группирование строк таблицы по структуре и используемым стилям.

Для элементов thead, tbody и tfoot можно задавать общие атрибуты class, dir, id, lang, style и title.

Свойства стилей для этих элементов задаются так же, как для элемента tr.

Пример 4.3.94. Задание элементов thead, tbody и tfoot:

tr.sum {

background-color:yellow; color:red;

font-family:Verdana; font-size: 16pt; font-weight:bold

}

td.right {

text-align:right

}

td.footer {

border:4pt blue double

}

Заключим заголовок столбцов элементов td в таблице из примера 4.3.88 с изменениями в заголовке, сделанными в примере 4.3.92(1) и с учетом правила стилей с селектором .header из примера 4.3.91 и правила стилей с селектором.nowrap из примера 4.3.92(2), в контейнер <thead>…</thead>:

<th rowspan="2">Номер группы</th>

<th

rowspan="2">Фамилия, имя и отчество студента</th>

<th colspan="3">Оценки по дисциплинам</th>

<th rowspan="2" class="nowrap">Средняя оценка</th>

</tr>

<th>Математика</th>

<th>Физика</th>

<th>Химия</th>

</tr>

</thead>.

Затем заключим строки данных в таблице из примера 4.3.88 в контейнер <tbody>…</tbody>.

Добавим после контейнера <tbody>…</tbody>контейнер <tfoot>…</tfoot>:

<tfoot>

Суммарная средняя оценка: </td>

</tr>

</tfoot>.

Тогда таблица из примера 4.3.88 со стилями, заданными в примерах 4.3.89(2), 4.3.90, 4.3.91 и 4.3.92(2), а также с учетом изменений, произведенных в заголовке в этом примере, примет следующий вид: