Вы здесь

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> поддерживает общие атрибуты и атрибуты-события.

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>

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

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


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