<thead>
- 25 января 2023
Тег <thead>
определяет верхнюю часть таблицы (шапку) в HTML-документе.
Синтаксис тега <thead>
<table>
<thead>
<tr>
<th>Заголовок столбца 1</th>
<th>Заголовок столбца 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1, столбец 1</td>
<td>Ячейка 1, столбец 2</td>
</tr>
<tr>
<td>Ячейка 2, столбец 1</td>
<td>Ячейка 2, столбец 2</td>
</tr>
</tbody>
</table>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <thead>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого. Он определяет верхнюю часть таблицы, содержащую заголовки столбцов, что помогает пользователям понимать структуру данных в таблице.
Примеры использования
Таблица с товарами:
<table>
<thead>
<tr>
<th>Название товара</th>
<th>Цена</th>
<th>Количество</th>
</tr>
</thead>
<tbody>
<tr>
<td>Телефон Кексунг</td>
<td>25 990 ₽</td>
<td>10 шт</td>
</tr>
<tr>
<td>Ноутбук АйКекс Pro</td>
<td>149 990 ₽</td>
<td>3 шт</td>
</tr>
</tbody>
</table>
Таблица с описанием услуг:
<section>
<h2>Наши услуги</h2>
<table>
<thead>
<tr>
<th>Услуга</th>
<th>Стоимость</th>
</tr>
</thead>
<tbody>
<tr>
<td>Разработка веб-сайтов</td>
<td>от 50 000 ₽</td>
</tr>
<tr>
<td>Дизайн логотипов</td>
<td>от 10 000 ₽</td>
</tr>
<tr>
<td>SEO-оптимизация</td>
<td>от 20 000 ₽</td>
</tr>
</tbody>
</table>
</section>
Для чего использовать тег <thead>
- Структурировать информацию на веб-странице. Например, вы можете использовать тег
<thead>
для заголовков столбцов с данными о продуктах в интернет-магазине. - Улучшить доступность сайта. Тег
<thead>
помогает пользователям, использующим программы чтения с экрана, лучше понимать контент таблицы и ориентироваться в ней. - Повысить позиции сайта в поисковой выдаче. Например, вы создаёте таблицу с расписанием занятий в фитнес-клубе. Если используете в ней тег
<thead>
, то поисковые системы поймут структуру данных и смогут показать информацию пользователям.
Атрибуты тега <thead>
У тега нет специфических атрибутов. Атрибуты align
, char
, charoff
и valign
устарели. Не используйте их.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <thead>
используется только внутри тега <table>
и служит для определения заголовка таблицы.
Нюансы
- Тег может содержать только теги
<tr>
с заголовками таблицы —<th>
. - Тег следует непосредственно за открывающим тегом
<table>
и предшествует тегам<tbody>
и<tfoot>
.
Поддержка браузерами
Тег <thead>
поддерживается всеми современными браузерами. Актуальная информация — на caniuse.
Альтернативные теги
Альтернативных тегов для тега <thead>
не существует.
Чем заменить тег
Прямой замены тегу <thead>
не существует.
Актуальность
Тег <thead>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023