Тег <thead>

Синтаксис

Описание

Тег <thead> (от англ. table head — голова, шапка таблицы) предназначен для группирования содержимого верхнего колонтитула HTML-таблицы.

Используется вместе с тегами <tbody> (содержание) и <tfoot> (нижний колонтитул).

Внимание!

В таблице разрешается использовать только один элемент <thead> и он должен содержать хотя бы один тег <tr>.

Контейнер <thead> идёт после тегов <caption> и <colgroup>, перед элементами <tbody> и <tfoot>. Если указанных элементов в таблице нет, тогда контейнер <thead> идёт перед всеми тегами <tr>.

Примечание!

Теги <thead>, <tbody>, <tfoot> и <th> не является обязательными элементами таблицы, но мы рекомендуем включать их в таблицу, так как они помогают лучше структурировать контент, а также помогает поисковым машинам лучше индексировать таблицы.

Атрибуты, которые можно использовать в теге <thead>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут	Значение	Описание
align	right left center justify char	Выравнивает содержимое элемента. Не поддерживается в HTML 5
bgcolor	rgb(x,x,x) #xxxxxx название цвета	Задает цвет фона ячеек внутри тега. Не поддерживается в HTML 5
char	символ	Выравнивает содержимое элемента по заданному символу. Используется только если атрибут align = "char". Не поддерживается в HTML 5
charoff	число	Выравнивает содержимое элементе с указанного в атрибуте символа, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Используется только если атрибут align = "char". Не поддерживается в HTML 5
valign	top bottom middle baseline	Задает вертикальное выравнивание содержимого элемента. Не поддерживается в HTML 5

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег thead</title>

</head>

<body>

<table>

<thead>

<tr>

<th>№</th>

<th>Наименование</th>

<th>Цена, р</th>

</tr>
</thead>

<tbody>

<tr>

<td>1</td>

<td>Молоко</td>

<td>3</td>

</tr>

<tr>

<td>2</td>

<td>Батон</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>Сметана</td>

<td>5</td>

</tr>
</tbody>
<tfoot>

<tr>

<td colspan="2">Сумма</td>

<td>10</td>

</tr>

</tfoot>

</table>

</body>

</html>

Отображение в браузере:

№	Наименование	Цена, р
Сумма		10
1	Молоко	3
2	Батон	2
3	Сметана	5

Параметры CSS по умолчанию

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

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

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<thead>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

<thead>

Да

Тег <thead>

Синтаксис

Описание

Внимание!

Примечание!

Атрибуты

Пример

Параметры CSS по умолчанию

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

Комментарии