Тег <thead> HTML верхний колонтитул таблицы

Рейтинг: 5 из 5, голосов 2
+++++

Тег <thead> определяет границы верхнего колонтитула таблицы HTML. Используется в HTML таблицах определенных тегом <table>.

К группе тегов отвечающих за различные части HTML таблиц относятся: тег <thead> - верхний колонтитул, <tbody> - основная часть, <tfoot> - нижний колонтитул.

Браузеры могут использовать разделение таблицы на смысловые части, например, выводя при печати области колонтитулов <thead> и <tfoot> на каждой напечатанной странице.

HTML тег <thead> должен располагаться внутри тега <table> после тегов <caption>, <col>, <colgroup>, и перед тегами <tfoot> и <tbody>.

Внутри тега <thead> должен быть один или несколько элементов <tr> - строк таблицы.

Стоит отметить, что теги <thead>, <tbody>, <tfoot> по умолчанию не изменяют стили таблицы. Для этого используйте CSS.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<thead>элементы tr с HTML контентом</thead>

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

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
Ячейка 7 Ячейка 8
Ячейка 5 Ячейка 6

Пример использования <thead> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Таблица с thead</title>
</head>
<body>
<table>
<!-- Ячейки верхнего колонтитула -->
<thead>
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</thead>
<tfoot>
<!-- Ячейки нижнего колонтитула -->
<tr>
<th>Ячейка 7</th>
<th>Ячейка 8</th>
</tr>
</tfoot>
<tbody>
<!-- Основная часть таблицы -->
<tr>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</tbody>
</table>
</body>
</html>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<thead> Да Да Да Да Да

Атрибуты <thead>

В HTML5 у тега <thead> нет атрибутов.

Устаревшие атрибуты

Атрибут Значения Описание
align left
right
center
justify
Задает правило выравнивания содержимого по горизонтали. В HTML5 используйте CSS.
valign top
middle
bottom
baseline
Задает правило выравнивания содержимого по вертикали. В HTML5 используйте CSS.
Оцените, насколько полезна эта статья
+++++
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.