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

Рейтинг: 3 из 5, голосов 11

07 января 2018 г.

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

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

Тег
<thead>	Да	Да	Да	Да	Да

Атрибуты <thead>

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

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

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

by Lebedev