<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>.