Тег <thead>

Описание

Тег <thead> (table header) определяет блок заголовков таблицы, группируя одну или несколько строк (<tr>) с ячейками-заголовками (<th>). Это семантический контейнер для верхней части таблицы, содержащей метки столбцов.

Базовый синтаксис:
<table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> </tr> </thead> <tbody> <tr><td>Данные 1</td><td>Данные 2</td></tr> </tbody> </table>

Ключевые особенности:

  • Должен содержать хотя бы одну строку (<tr>)
  • Обычно включает ячейки-заголовки (<th>)
  • По спецификации может быть только один <thead> на таблицу
  • Позиционируется перед <tbody> и <tfoot>
  • Поддерживает все глобальные атрибуты HTML
Пример сложной шапки таблицы:
<table> <thead> <tr> <th colspan="2">Основная информация</th> <th colspan="3">Оценки</th> </tr> <tr> <th scope="col">ID</th> <th scope="col">ФИО</th> <th scope="col">Математика</th> <th scope="col">Физика</th> <th scope="col">Химия</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Иванов И.И.</td> <td>5</td> <td>4</td> <td>5</td> </tr> </tbody> </table>

Рекомендации по использованию:

  • Всегда используйте <thead> для семантической разметки таблиц
  • Сочетайте с <th scope="col"> для указания заголовков столбцов
  • Для многоуровневых заголовков применяйте вложенные строки
  • Фиксируйте шапку при вертикальной прокрутке больших таблиц
  • Обеспечивайте достаточный контраст для заголовков

Тег <thead> является важным структурным элементом таблиц, обеспечивающим логическую организацию заголовков и улучшающим взаимодействие пользователей с табличными данными.

Атрибуты

align Горизонтальное выравнивание содержимого
char Символ для выравнивания
charoff Смещение выравнивания
valign Вертикальное выравнивание содержимого
accesskey Горячая клавиша для активации
class CSS-классы для стилизации
contenteditable Разрешает редактирование
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
style Инлайновые стили
tabindex Порядок перехода
title Всплывающая подсказка
translate Определяет возможность перевода
role ARIA-роль
aria-* ARIA-атрибуты

Поддержка браузерами
4.0 1.0 1.0 1.0 1.0