HTML тег thead

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

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

Браузеры могут использовать эти элементы для прокрутки основного содержимого таблицы независимо от ее верхнего и нижнего колонтитулов. Также, при печати большой таблицы, занимающей несколько страниц, эти элементы будут использоваться для печати верхнего и нижнего колонтитулов внизу и вверху каждой страницы.

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

Внутри элемента <thead> должен быть определен по крайней мере один элемент <tr>.

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

Разница между HTML 4.01 и HTML5

В HTML5 не поддерживается ни один атрибут для HTML 4.01.

Атрибуты тега <thead>

АтрибутОписание
alignОпределяет горизонтальное выравнивание содержимого элемента
charОпределяет символ выравнивания, по которому будет выравниваться содержимое внутри элемента
charoffОпределяет количество символов смещения относительно символа выравнивания
valignОпределяет вертикальное выравнивание содержимого элемента <thead>

Общие атрибуты

Тег <thead> поддерживает общие атрибуты и атрибуты-события.

CSS стили по умолчанию

Большинство браузеров будут отображать тег <thead> со следующими стилями


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

HTML пример использования

HTML таблица с элементами <thead>, <tfoot> и <tbody>:


<table>
   <thead>
   <tr>
      <th>Месяц</th>
      <th>Сэкономлено</th>
   </tr>
   </thead>
   <tfoot>
   <tr>
       <td>Итого</td>
       <td>$180</td>
   </tr>
   </tfoot>
   <tbody>
   <tr>
      <td>Январь</td>
      <td>$100</td>
   </tr>
   <tr>
       <td>Февраль</td>
       <td>$80</td>
   </tr>
   </tbody>
</table>