HTML <thead> тег

  • Предыдущая страница <th>
  • Следующая страница <time>

определение и использование

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

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

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

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

<thead> теги должны использоваться в следующем контексте: в качестве <table> подэлементы элементов, в любом <caption> и <colgroup> после элемента, а также в любом </tbody>,<tfoot> и <tr> до элемента.

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

пример

пример 1

HTML-таблица, содержащая элементы <thead>, <tbody> и <tfoot>:

<table>
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Сбережения</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>Январь</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>итого</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Попробуйте сами

пример 2

установите стили <thead>, <tbody> и <tfoot> с помощью CSS:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Сбережения</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>Январь</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>итого</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Попробуйте сами

пример 3

как выровнять <thead> содержание (использование CSS):

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>Месяц</th>
      <th>Сбережения</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>Январь</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Попробуйте сами

пример 4

как выровнять вертикально <thead> содержание (использование CSS):

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>Месяц</th>
      <th>Сбережения</th>
    </tr>
  </thead>
   </tbody>
    <tr>
      <td>Январь</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Попробуйте сами

Глобальные свойства

<thead> Тег также поддерживает Глобальные свойства в HTML.

свойства событий

<thead> Тег также поддерживает Свойства событий в HTML.

Настройки CSS по умолчанию

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

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <th>
  • Следующая страница <time>