<th>
- 25 января 2023
Что делает тег
Тег <th>
создаёт ячейки заголовка в таблице. Обычно он располагается в первой строке таблицы, но может использоваться и в других строках, если это необходимо. Тег может содержать текст, изображения, ссылки и другие элементы HTML.
Синтаксис тега <th>
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
</table>
Спецификация HTML
Тег является частью HTML Living Standard.
Семантический или нет
Тег <th>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Таблица с тремя столбцами, содержащими имена, фамилии и возраст людей:
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Иван</td>
<td>Иванов</td>
<td>30</td>
</tr>
<tr>
<td>Пётр</td>
<td>Петров</td>
<td>25</td>
</tr>
</table>
Объединение двух ячеек заголовка в одну строку:
<table>
<tr>
<th colspan="2">Данные о заказе</th>
</tr>
<tr>
<th>Товар</th>
<th>Количество</th>
</tr>
<tr>
<td>Молоко</td>
<td>2</td>
</tr>
<tr>
<td>Хлеб</td>
<td>1</td>
</tr>
</table>
Для чего использовать тег <th>
- Отобразить заголовки таблиц в HTML-документе.
- Создать стилизованную таблицу с помощью CSS.
- Создать интерактивные таблицы с помощью JavaScript.
Атрибуты тега <th>
colspan
— количество объединяемых ячеек по горизонтали.
rowspan
— количество объединяемых ячеек по вертикали.
headers
— определяет связанные ячейки. Значение атрибута должно соответствовать значению атрибута id
элемента <th>
связанной ячейки.
scope
— область ячейки для тегов <th>
.
abbr
— аббревиатура или сокращение для содержимого ячейки.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <th>
может быть использован только внутри тега <tr>
в таблице.
Нюансы
- Заголовки таблиц должны быть размечены с помощью тега
<thea>
, в котором находятся строки заголовков с тегом<th>
. - Для отображения тела таблицы следует использовать тег
<tbody>
.
Поддержка браузерами
Тег поддерживается всеми современными браузерами. Актуальная информация — на caniuse.
Альтернативные теги
Для создания ячеек таблицы без заголовков можете использовать тег
<td>
.
Чем заменить тег
Тег можно заменить тегом <td>
.
Актуальность
Тег <th>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


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