Тег thead (от английского table head, «голова таблицы») собирает строки шапки: те, где записаны названия колонок. Браузер выводит шапку над телом таблицы, повторяет её на каждой странице при печати, и её можно закрепить при прокрутке. Без thead строка с заголовками тоже видна, но при печати на следующих страницах она не повторяется.
Что такое шапка и в каком порядке выводятся секции таблицы, объясняет урок «Как разделить таблицу: thead, tbody и tfoot». Здесь разберём остальное: какие стили доходят до ячеек шапки, как её закрепить, что получится при печати, как управлять ею из скрипта и что делает браузер с неверной записью.
<table>
<thead>
<tr><th scope="col">Чай</th><th scope="col">Цена</th></tr>
</thead>
<tbody>
<tr><td>Улун</td><td>120</td></tr>
</tbody>
</table>В этой статье
- Тег thead в HTML: что это и что записывать внутри
- Где записывать thead: порядок, пропуск закрывающего тега и парсер
- Стили thead: что доходит до ячеек шапки
- Закрепление thead при прокрутке: sticky, обёртка и границы
- Шапка thead при печати: как она повторяется на страницах
- Тег thead и JavaScript: createTHead, tHead и rows
- Частые ошибки с тегом thead
Тег thead в HTML: что это и что записывать внутри
Внутри thead записывают только строки tr. Строк может быть несколько: так делают шапку с группами колонок. Тег парный, закрывающий можно опустить, если сразу за ним идёт tbody или tfoot. По умолчанию браузер выводит его как отдельную секцию, которая всегда стоит над телом.
Важнее всего, что именно записано в строках шапки. По стандарту заголовочные ячейки — это th, а td остаются обычными ячейками данных, даже если стоят в шапке.
| Что записано в шапке | Чем это считается | Пример записи |
|---|---|---|
th в thead | Заголовок колонки | <th scope="col">Цена</th> |
td в thead | Ячейка данных: заголовком колонки не считается | <td>Цена</td> |
th в начале строки tbody | Заголовок строки | <th scope="row">Улун</th> |
Ячейки шапки можно объединять, как и в любой таблице. Но объединение не выходит за пределы секции: если задать ячейке в шапке из двух строк rowspan="3", Chrome растянет её только на две строки, строки tbody она не захватит.
<thead>
<tr><th rowspan="2">Чай</th><th colspan="2">Цена</th></tr>
<tr><th>Опт</th><th>Розница</th></tr>
</thead>Где записывать thead: порядок, пропуск закрывающего тега и парсер
По стандарту thead стоит внутри table после caption и colgroup и перед tbody, tfoot и строками, причём только один. Браузер принимает и другие записи, но результат не всегда такой, как ждёт автор.
| Как записано | Что делает браузер | Пример записи |
|---|---|---|
thead после tbody | Выводит шапку сверху, а в коде она остаётся на месте | <tbody>...</tbody><thead>...</thead> |
Два thead | Шапкой считает первый, второй остаётся обычной секцией на своём месте | <thead>...</thead><tbody>...</tbody><thead>...</thead> |
Текст или div внутри thead | Выносит их из таблицы, они оказываются перед ней | <thead>Шапка<tr>...</tr></thead> |
Пустой thead | Выводит секцию высотой 0, строк в шапке нет | <thead></thead> |
Нет закрывающего </thead> | Закрывает шапку сам, когда встречает tbody | <thead><tr><th>Чай<tbody>... |
Пример: где записан thead и что получилось
Выберите запись: вверху виден код, внизу — что получилось на экране.
Порядок секций в таблице, в том числе то, почему подвал tfoot выводится внизу, разобран в уроке «Как разделить таблицу: thead, tbody и tfoot». Подробности о допустимых местах записи — в описании элемента в стандарте HTML.
Стили thead: что доходит до ячеек шапки
В отличие от группы колонок на странице colgroup, секция thead содержит ячейки, поэтому наследуемые свойства доходят до них. Если задать thead свойство color, font-size или text-align, его получат все ячейки шапки сразу, повторять на каждой ячейке не нужно. Фон и граница не наследуются: их рисует сама секция.
Свойство у thead | Что получается | Пример записи |
|---|---|---|
color | Цвет текста получают все ячейки шапки | thead { color: #fff; } |
font-size | Размер шрифта получают все ячейки шапки | thead { font-size: 20px; } |
text-align | Выравнивание получают и td, и th: правило браузера «по центру» для th уступает | thead { text-align: left; } |
font-weight | Меняет td, а заголовочные th остаются жирными | thead th { font-weight: 400; } |
background | Закрашивает ячейки, но не промежутки между ними | thead { background: #2c5e77; } |
border | Рисуется только при border-collapse: collapse | thead { border-bottom: 2px solid; } |
box-shadow | Работает при любом режиме границ | thead { box-shadow: 0 2px 0 #000; } |
Пример: что доходит до ячеек шапки
Выберите правило и при желании включите border-collapse: collapse. В шапке есть и th, и td, поэтому видно, кто получил правило.
Чтобы изменить жирность заголовочных ячеек, правило записывают для thead th, а не для thead. Размеры и отступы ячеек тоже задают на th.
thead {
background: #2c5e77;
color: #fff;
text-align: left;
}
thead th {
font-weight: 400;
}Закрепление thead при прокрутке: sticky, обёртка и границы
Шапку закрепляют значением position: sticky со свойством top: пока таблица на экране, шапка остаётся у верхнего края блока, а когда таблица кончается, уходит вместе с ней. Записать правило можно на thead или на th, и результат разный. Ниже описано поведение Chrome.
| Запись | Результат | Пример записи |
|---|---|---|
thead с position: sticky | Все строки шапки закреплены как одна группа и не наезжают друг на друга | thead { position: sticky; top: 0; } |
th с position: sticky, одна строка | Работает так же | th { position: sticky; top: 0; } |
th с position: sticky, две строки | Строки наезжают друг на друга: у каждой top: 0 | th { position: sticky; top: 0; } |
th второй строки со своим top | Вторая строка закреплена под первой, если top равен высоте первой строки | thead tr:nth-child(2) th { top: 28px; } |
Закреплённая шапка в блоке с overflow-x: auto | Закрепление не работает при прокрутке страницы: шапка привязывается к обёртке | .wrap { overflow-x: auto; } |
Тот же блок с overflow-x: clip | Закрепление работает, но горизонтальной прокрутки нет: широкая таблица обрезается | .wrap { overflow-x: clip; } |
Блок с max-height и overflow: auto | Прокручивается в обе стороны, шапка закрепляется внутри него | .wrap { max-height: 70vh; overflow: auto; } |
Закрепление при border-collapse: collapse | Нижняя граница ячеек шапки пропадает при прокрутке | th { box-shadow: inset 0 -2px 0 #000; } |
Пример: закрепление в блоке с прокруткой
Выберите запись, нажмите «Прокрутить вниз» и посмотрите на отметку шапки. В вариантах с обёрткой таблица лежит в блоке с overflow, как на странице с широкой таблицей.
У ячеек шапки должен быть свой фон: иначе строки тела видны сквозь закреплённую шапку. Если над таблицей на странице закреплена шапка сайта, значение top равно её высоте. Если таблица шире экрана, обёртке задают max-height и overflow: auto: она прокручивается в обе стороны, а шапка закрепляется внутри неё. Значение overflow-x: clip закрепление сохраняет, но горизонтальную прокрутку убирает, и широкая таблица обрезается.
.wrap {
max-height: 70vh;
overflow: auto;
}
thead {
position: sticky;
top: 0;
}
thead th {
background: #fff;
box-shadow: inset 0 -2px 0 #000;
}Шапка thead при печати: как она повторяется на страницах
При печати длинной таблицы на нескольких страницах браузер повторяет шапку в начале каждой страницы. Для этого ничего записывать не нужно: так ведёт себя любая секция thead. В пробной таблице из 120 строк при печати на листах формата A4 шапка вышла на каждой странице. Посмотреть результат можно в предпросмотре печати: Ctrl + P.
Повтор бывает лишним, например когда шапка высокая. Тогда секции возвращают обычный режим вывода, и шапка остаётся только на первой странице.
@media print {
thead {
display: table-row-group;
}
}| Запись | Результат при печати | Пример записи |
|---|---|---|
Обычный thead | Шапка повторяется на каждой странице | <thead>...</thead> |
thead с display: table-row-group | Шапка стоит только на первой странице | thead { display: table-row-group; } |
Строка заголовков в tbody | Выводится один раз и не повторяется | <tbody><tr><th>Чай</th></tr>... |
Тег thead и JavaScript: createTHead, tHead и rows
Секция thead в скрипте представлена интерфейсом HTMLTableSectionElement. У таблицы есть свойство tHead, которое возвращает шапку или null, и два метода для работы с ней. Метод createTHead() создаёт шапку, а если она уже есть, возвращает её же, поэтому два вызова подряд не дадут две шапки. Метод deleteTHead() шапку удаляет.
| Запись | Что делает | Пример записи |
|---|---|---|
table.tHead | Возвращает шапку таблицы или null | const head = table.tHead; |
table.createTHead() | Создаёт шапку перед tbody, после caption и colgroup | table.createTHead(); |
table.deleteTHead() | Удаляет шапку | table.deleteTHead(); |
thead.insertRow() | Добавляет строку в шапку | head.insertRow(); |
thead.rows | Список строк шапки | head.rows.length |
table.rows | Все строки: сначала шапка, потом тело, потом подвал | table.rows[0] |
Пример: методы таблицы для шапки
Выберите действие: вверху виден код, ниже таблица и результат, который считает сама страница.
const table = document.querySelector('table');
const head = table.createTHead();
const row = head.insertRow();
row.insertCell().textContent = 'Чай';
row.insertCell().textContent = 'Цена';Учтите: ячейки, созданные методом insertCell(), получаются тегами td, а не th. Для заголовочных ячеек их создают отдельно через document.createElement('th').
Частые ошибки с тегом thead
Типичные ошибки с тегом thead и как их исправить.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
thead записан после tbody | Шапка выводится сверху, но код читать труднее | Записывать thead до tbody |
Два thead в одной таблице | Шапкой считается только первый, второй остаётся обычной секцией | Объединить строки в один thead |
Текст внутри thead | Браузер выносит его перед таблицей | Записывать текст в ячейки th |
td вместо th в шапке | Ячейки остаются ячейками данных и заголовками колонок не считаются | <th scope="col">Цена</th> |
thead { font-weight: 400; } | th остаются жирными | thead th { font-weight: 400; } |
thead { border: 1px solid; } без collapse | Рамка не рисуется | Добавить border-collapse: collapse или использовать box-shadow |
th { position: sticky; top: 0; } при двух строках шапки | Строки наезжают друг на друга | thead { position: sticky; top: 0; } |
Закрепление в обёртке с overflow-x: auto | Шапка не закрепляется при прокрутке страницы | .wrap { max-height: 70vh; overflow: auto; } |
| Закреплённая шапка без фона | Строки тела видны сквозь шапку | thead th { background: #fff; } |
Закрепление при border-collapse: collapse | Нижняя граница шапки пропадает при прокрутке | th { box-shadow: inset 0 -2px 0 #000; } |
rowspan длиннее шапки | Chrome обрезает ячейку по границе секции | Считать строки шапки и не выходить за них |
Устаревшие align, valign, bgcolor у thead | Атрибуты устарели | Свойства text-align, vertical-align и background |
