HTML тег `<thead>`

Значение и применение

Следующие HTML теги используются для разделения таблицы на части:

Тег <thead> используется для содержания заголовка группы в таблице ("шапка таблицы", не путайте с заголовками).
Тег <tfoot> используется для содержания "подвала" таблицы (футер).
Тег <tbody> используется для содержания "тела" таблицы (боди).

Примечание

Элемент <thead> должен быть использован только один раз в одной таблице в следующем контексте: в составе элемента <table> (как дочерний (вложенный) элемент), при наличии тегов <caption> (наименование таблицы) и <colgroup> (определяет группу столбцов в таблице) должен следовать после этих элементов, но прежде, чем любой тег <tbody>, <tfoot> и <tr>. Кроме того, элемент <thead> должен иметь один или более тегов <tr> внутри (контейнер для создания строки).

Элементы <thead>, <tbody> и <tfoot> не влияют на расположение таблицы по умолчанию. Тем не менее, с использованием CSS, вы сможете стилизовать эти элементы по своему усмотрению.

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (2) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.thead
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`thead`	✓1	✓12	✓1	✓≤12.1	✓1 Версия 1 выпущена в 2003 г. Примечание MDN (англ.) Backgrounds applied to `<thead>` elements will be applied to each table cell, rather than the entire header. To mimic the behavior of other browsers, set the `background-attachment` CSS property to `fixed`.	✓18	✓4	✓≤12.1	✓1 Версия 1 выпущена в 2007 г. Примечание MDN (англ.) Backgrounds applied to `<thead>` elements will be applied to each table cell, rather than the entire header. To mimic the behavior of other browsers, set the `background-attachment` CSS property to `fixed`.	✓1.0	✓4.4	✓1 Версия 1 выпущена в 2007 г. Примечание MDN (англ.) Backgrounds applied to `<thead>` elements will be applied to each table cell, rather than the entire header. To mimic the behavior of other browsers, set the `background-attachment` CSS property to `fixed`.
`align`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`bgcolor`	✓1	✓12	✓1	✓≤15	✓1	✓18	✓4	✓≤14	✓1	✓1.0	✓4.4	✓1
`char`	× Нет поддержки Примечание MDN (англ.) Since Chrome 1, the attribute can be set, but has no effect.	× Версия 12 выпущена в 2015 г. — Удалено в 79 Примечание MDN (англ.) Since Edge 79, the attribute can be set, but has no effect.	×	× Нет поддержки Примечание MDN (англ.) Since Opera 15, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since Safari 3, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since Chrome Android 18, the attribute can be set, but has no effect.	×	× Нет поддержки Примечание MDN (англ.) Since Opera Android 14, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since Safari on iOS 2, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since Samsung Browser 1.0, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since WebView Android 4.4, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since WebView on iOS 2, the attribute can be set, but has no effect.
`charoff`	× Нет поддержки Примечание MDN (англ.) Since Chrome 1, the attribute can be set, but has no effect.	× Версия 12 выпущена в 2015 г. — Удалено в 79 Примечание MDN (англ.) Since Edge 79, the attribute can be set, but has no effect.	✓1	× Нет поддержки Примечание MDN (англ.) Since Opera 15, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since Safari 3, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since Chrome Android 18, the attribute can be set, but has no effect.	✓4	× Нет поддержки Примечание MDN (англ.) Since Opera Android 14, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since Safari on iOS 2, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since Samsung Browser 1.0, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since WebView Android 4.4, the attribute can be set, but has no effect.	× Нет поддержки Примечание MDN (англ.) Since WebView on iOS 2, the attribute can be set, but has no effect.
`valign`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
Ещё 3 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`align`	`left right center justify char`	Не поддерживается в HTML5. Выравнивает содержимое внутри элемента.
`char`	`character`	Не поддерживается в HTML5. Выравнивает содержимое в элементе по заданному символу. Атрибут `char` может быть использован только если атрибут `align =` `"char"`.
`charoff`	`number`	Не поддерживается в HTML5. Атрибут, который позволяет произвести выравнивание в элементе с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут `charoff` может быть использован только если атрибут `align =` `"char"`.
`valign`	`top bottom baseline middle`	Не поддерживается в HTML5. Вертикальное выравнивание содержимого внутри элемента.

Примеры, попробуйте сами

Структура таблицы

Измените thead и сравните заголовки, основную часть и итог таблицы.

base.css

CSS

/* Границы помогают увидеть ячейки и их объединение. */
table {
    border-collapse: collapse;
}
th,
td {
    border: 1px solid;
    padding: 4px;
}

index.html

HTML

<table>
  <caption>
    Заказ
  </caption>
  <thead>
    <tr>
      <th scope="col">Товар</th>
      <th scope="col">Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Блокнот</th>
      <td>2</td>
    </tr>
    <tr>
      <th scope="row">Карандаш</th>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Всего</th>
      <td>5</td>
    </tr>
  </tfoot>
</table>

Отличия HTML 4.01 от HTML 5

В HTML 5 были удалены все атрибуты тега.

Значение CSS по умолчанию

CSS

thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <thead>