HTML :: Тег <thead>
В HTML тег <thead> (от англ. table head – шапка таблицы) предназначен для группирования одной или нескольких строк вверху таблицы. Обычно в нем располагаются заголовочные ячейки <th>, однако в случае их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается применение только одного элемента <thead> в пределах одной таблицы, который должен располагаться после элементов <caption> или <colgroup>, если они конечно присутствуют, но перед элементами <tbody>, <tfoot> или <tr>.
Допускается отсутствие строк в секциях <thead>, но если секции в таблице созданы, то использовать строки вне элементов <thead>, <tbody> и <tfoot> не разрешается.
Закрывающий тег может быть опущен, если за ним идет элемент <tfoot> или элемент <tbody>.
Синтаксис
<table>
<caption>…</caption>
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>
Закрывающий тег: не обязателен.
Атрибуты
Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/tables.html#the-thead-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/thead
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> <!-- Для оформления используем стили, а не атрибуты --> <style> table, th,td{ border: 1px solid black; } table{ border-collapse: collapse } </style> </head> <body> <table> <caption>Деление на секции с выделением разным фоном</caption> <thead style="background-color: yellow"> <tr> <th>Я – первая заглавная ячейка </th> <th>А я – вторая заглавная ячейка</th> </tr> </thead> <tbody style="background-color: green"> <tr> <td>Я – первая ячейка в первой строке тела</td> <td>Я – вторая ячейка в первой строке тела</td> </tr> <tr> <td>Я – первая ячейка во второй строке тела</td> <td>Я – вторая ячейка во второй строке тела</td> </tr> </tbody> <tfoot style="background-color: grey"> <tr> <td>Итог:</td> <td>использовано три фона</td> </tr> </tfoot> </table> </body> </html>
Пример №1