HTML - тег <thead> определяет заголовок HTML таблицы . Этот тег используется вместе с тегами <tbody> и <tfoot>, которые определяют тело и нижний колонтитул таблицы соответственно.
Тег <thead> - синтаксис и код
Тег <thead> представлен парами. Содержимое записывается между открывающим (<thead>) и закрывающим (</thead>) тегами.
Пример кода HTML таблиц с элементами <thead>, <tbody> и <tfoot>:
<table>
<thead>
<tr>
<th>Месяц</th>
<th>Экономия</th>
</tr>
</thead>
<tbody>
<tr>
<td>Январь</td>
<td>10000 ₽</td>
</tr>
<tr>
<td>Февраль</td>
<td>5000 ₽</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Итого:</td>
<td>15000 ₽</td>
</tr>
</tfoot>
</table>
| Месяц |
Экономия |
| Январь |
10000 ₽ |
| Февраль |
5000 ₽ |
| Итого: |
15000 ₽ |
Определение и использование
- HTML - тег
<thead> используется для группировки содержимого заголовка в таблице HTML;
- Элемент
<thead> используется вместе с элементами <tbody> и <tfoot> для указания каждой части таблицы (заголовок, тело, нижний колонтитул).
Браузеры могут использовать эти элементы для прокрутки тела таблицы независимо от верхнего и нижнего колонтитула. Кроме того, при печати большой таблицы, занимающей несколько страниц, эти элементы позволяют печатать верхний и нижний колонтитулы таблицы вверху и внизу каждой страницы.
Тег <thead> необходимо использовать в следующем контексте:
- В качестве дочернего элемента <table>.
- После любых элементов <caption> и <colgroup>.
- И перед любыми элементами <tbody>, <tfoot> и <tr>.
✪ Рекомендация: элементы <thead>, <tbody> и <tfoot> по умолчанию не влияют на макет таблицы. Однако вы можете использовать CSS для стилизации этих элементов.
★ Примечание: внутри элемента <thead> должен быть один или несколько тегов <tr>.
Поддержка <thead> браузерами
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
Еще примеры
Пример оформления <thead>, <tbody> и <tfoot> с помощью CSS:
<html>
<head>
<style>
thead {color: green;}
tbody {color: yellow;}
tfoot {color: red;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Месяц</th>
<th>Экономия</th>
</tr>
</thead>
<tbody>
<tr>
<td>Январь</td>
<td>10000 ₽</td>
</tr>
<tr>
<td>Февраль</td>
<td>5000 ₽</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Итого:</td>
<td>15000 ₽</td>
</tr>
</tfoot>
</table>
</body>
</html>
| Месяц |
Экономия |
| Январь |
10000 ₽ |
| Февраль |
5000 ₽ |
| Итого: |
15000 ₽ |
Атрибуты
Тег <thead> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <thead> также поддерживает атрибуты событий в HTML
Связанные страницы
Руководство по HTML: таблицы HTML
Настройки CSS по умолчанию
Большинство браузеров отображают элемент thead со следующими значениями по умолчанию:
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
