HTML тег <thead>
Тег HTML <thead> группирует строки заголовка таблицы. Синтаксис, доступность с th scope и CSS — с примерами.
Тег <thead> определяет заголовок HTML-таблицы. Тег используется вместе с тегами <tbody> и <tfoot>, которые задают тело и подвал таблицы соответственно.
Тег <thead> должен быть дочерним элементом <table>, располагаться после элементов <caption> и <colgroup>, а также перед элементами <tbody>, <tfoot> и <tr>. Внутри <table> можно использовать только один тег <thead>.
В HTML5 тег <tfoot> может располагаться как до, так и после <tbody> — браузер в обоих случаях отображает подвал внизу таблицы. (В более старой спецификации HTML 4.01 тег <tfoot> должен был стоять перед <tbody>; это требование было упразднено в HTML5.)
Зачем нужен тег <thead>
Группировка строк заголовка в <thead> — это не просто вопрос аккуратной разметки. Она придаёт таблице настоящую семантическую структуру, которую могут использовать браузеры и вспомогательные технологии:
- Программы чтения с экрана могут определять и озвучивать ячейки заголовка, помогая пользователям понять значение каждой ячейки данных при навигации по таблице.
- Печать и длинные таблицы: когда таблица занимает несколько печатных страниц (или прокручивается внутри контейнера фиксированной высоты), браузеры могут повторять строки
<thead>вверху каждой страницы или раздела, чтобы столбцы оставались подписанными. - Стилизация и скриптинг становятся проще: можно нацелиться на
theadв CSS или сортировать только строки тела в JavaScript, не затрагивая заголовок.
Чтобы структура была осмысленной, размещайте ячейки <th scope="col"> внутри <thead> — см. раздел Доступность ниже.
Элемент <thead> должен содержать хотя бы один элемент <tr>.
Элементы <thead>, <tbody> и <tfoot> по умолчанию не влияют на макет таблицы. Используйте свойства CSS для настройки внешнего вида таблицы.
Синтаксис
Тег <thead> используется в паре. Содержимое записывается между открывающим (<thead>) и закрывающим (</thead>) тегами.
<table>
<thead>
<tr>
<th scope="col"> ... </th>
</tr>
</thead>
<tbody> ... </tbody>
<tfoot> ... </tfoot>
</table>Пример HTML-тега <thead>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>Доступность
Тег <thead> приносит основную пользу именно в плане доступности. Чтобы получить максимальный эффект, используйте внутри него <th> (а не <td>) и добавьте атрибут scope:
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>scope="col" сообщает программам чтения с экрана, что ячейка является заголовком для всего столбца. По мере перемещения пользователя по столбцу вспомогательная технология может озвучивать заголовок перед каждой ячейкой данных, благодаря чему связь между значением (например, 500) и его подписью (Savings) не теряется. Для заголовка, который обозначает строку, а не столбец, используйте scope="row". Подробнее о ячейках заголовка и значениях scope см. в описании тега <th>.
Оставляйте реальные названия столбцов в <thead>, а итоговые или промежуточные строки — в <tfoot>; именно такая последовательная структура позволяет программам чтения с экрана, таблицам стилей для печати и скриптам корректно обрабатывать заголовок.
Атрибуты
Все приведённые ниже атрибуты устарели и не поддерживаются в HTML5. Они перечислены здесь лишь для того, чтобы вы могли распознать их в устаревшей разметке. Вместо них используйте CSS — см. раздел Замена устаревших атрибутов с помощью CSS.
| Атрибут | Значения | Описание |
|---|---|---|
| align | left, right, center, justify, char | Горизонтальное выравнивание содержимого внутри <thead>. Не поддерживается в HTML5. |
| bgcolor | color (название или hex) | Цвет фона строк внутри <thead>. Не поддерживается в HTML5. |
| char | character | Выравнивает содержимое по символу; используется только с align="char". Не поддерживается в HTML5. |
| charoff | number | Смещение (в символах) от символа, заданного атрибутом char; используется только с align="char". Не поддерживается в HTML5. |
| valign | top, bottom, middle, baseline | Вертикальное выравнивание содержимого внутри <thead>. Не поддерживается в HTML5. |
Тег <thead> также поддерживает глобальные атрибуты и атрибуты событий.
Замена устаревших атрибутов с помощью CSS
Каждый из перечисленных выше презентационных атрибутов имеет прямой эквивалент в CSS, который следует использовать вместо него:
| Старый атрибут | Замена на CSS |
|---|---|
align="center" | text-align: center; |
valign="middle" | vertical-align: middle; |
bgcolor="#f2f2f2" | background-color: #f2f2f2; |
char / charoff | Эквивалента в CSS нет; выравнивайте числа с помощью text-align или отступов. |
Типичный стилизованный заголовок выглядит так:
thead {
background-color: #f2f2f2;
font-weight: bold;
}
thead th {
text-align: center;
vertical-align: middle;
padding: 10px;
}Дополнительные параметры оформления таблиц см. в разделе CSS Tables.