Тег <thead>: группа заголовочных строк таблицы
Thead объединяет строки, описывающие столбцы таблицы. Он отделяет заголовочную часть от основных данных и помогает выразить структуру независимо от фонового цвета или жирного шрифта.
Назначение
Thead объединяет строки, описывающие столбцы таблицы. Он отделяет заголовочную часть от основных данных и помогает выразить структуру независимо от фонового цвета или жирного шрифта.
Как это работает
Внутри thead размещают tr, а внутри строк — ячейки. Для простой таблицы заголовочные ячейки th получают scope="col". Caption задаёт название всей таблицы и не заменяется строкой внутри thead.
Пример
<table><caption>Учебный план</caption><thead><tr><th scope="col">Тема</th><th scope="col">Уроков</th></tr></thead><tbody><tr><td>Разметка</td><td>4</td></tr><tr><td>Стили</td><td>6</td></tr></tbody></table>Что должно получиться
Верхняя строка описывает значения каждой колонки, а следующие строки содержат данные. Семантика заголовка задаётся th; одно помещение обычной td в thead не решает все задачи связи ячеек.
Граница применения и частая ошибка
Не создавайте отдельную таблицу для заголовка ради прокрутки: так легко потерять связи и совпадение ширин. Повтор заголовков при печати зависит от браузера и оформления, поэтому его нужно проверять на реальном многостраничном документе.
Самостоятельная проверка
Добавьте колонку с длительностью и соответствующий th. Проверьте одинаковое число ячеек в строках. Затем отключите оформление и убедитесь, что название таблицы и названия колонок по-прежнему объясняют данные.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.