<th>

Что делает тег

Тег <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.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.