<thead>: Элемент заголовка таблицы

Элемент <thead> HTML заключает в себе набор строк таблицы (<tr> элементы), указывающий, что они образуют заголовок таблицы с информацией о столбцах таблицы. Обычно это в виде заголовков столбцов (<th> элементы).

Этот элемент включает в себя глобальные атрибуты.

Следующие атрибуты устарели и не должны использоваться. Они документированы ниже для справки при обновлении существующего кода и для исторической справки.

align Устаревший

Указывает горизонтальное выравнивание каждой ячейки заголовка. Возможные значения перечисления (см. left) являются center, right, justify, char, и char. В случае поддержки, значение char выравнивает текстовое содержимое по символу, определенному в атрибуте char, и смещению, определенному атрибутом charoff. Вместо этого используйте CSS-свойство text-align, так как этот атрибут устарел.

bgcolor Устаревший

Определяет цвет фона каждой ячейки заголовка. Значение — HTML-цвет; либо 6-значный шестнадцатеричный код RGB #, либо ключевое слово цвета <color>. Другие значения CSS background-color не поддерживаются. Вместо этого используйте CSS-свойство background-color, так как этот атрибут устарел.

char Устаревший

Не делает ничего. Первоначально предназначался для указания выравнивания содержимого по символу в каждой ячейке заголовка. Если align не задано значение char, этот атрибут игнорируется.

charoff Устаревший

Не делает ничего. Первоначально предназначался для указания количества символов для смещения содержимого ячейки заголовка от символа выравнивания, указанного атрибутом char.

valign Устаревший

Указывает вертикальное выравнивание каждой ячейки заголовка. Возможные значения перечисления (см. baseline) — bottom, middle, и top. Вместо этого используйте CSS-свойство vertical-align, так как этот атрибут устарел.

• Элемент <thead> располагается после элементов <caption> и <colgroup>, но перед элементами <tbody>, <tfoot> и <tr>.
• Вместе с сопутствующими элементами <tbody> и <tfoot> элемент <thead> предоставляет полезную семантическую информацию (см. <table>) и может использоваться для отображения как на экране, так и при печати. Указание таких групп содержимого таблицы также предоставляет ценную контекстную информацию для вспомогательных технологий, включая экранные читатели и поисковые системы.
• При печати документа в случае многостраничной таблицы заголовок таблицы обычно указывает информацию, которая остается одинаковой на каждой странице.

См. <table> для примера полной таблицы, демонстрирующего общие стандарты и рекомендации.

Этот пример демонстрирует таблицу, разделенную на секцию заголовка со заголовками столбцов и секцию тела с основными данными таблицы.

HTML

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

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

Используется базовая CSS-стилизация для выделения заголовка таблицы, чтобы заголовки столбцов выделялись на фоне данных в теле таблицы.

thead {
  border-bottom: 2px solid rgb(160 160 160);
  text-align: center;
  background-color: #2c5e77;
  color: #fff;
}

tbody {
  background-color: #e4f0f5;
}

Результат

Этот пример демонстрирует секцию заголовка таблицы с двумя строками.

HTML

Мы расширяем разметку таблицы из предыдущего примера, добавив две строки таблицы (<tr>) в элемент <thead>, создавая заголовок таблицы с несколькими строками. Мы добавили дополнительный столбец, разделив имена студентов на имя и фамилию.

<table>
  <thead>
    <tr>
      <th rowspan="2">Student ID</th>
      <th colspan="2">Student</th>
      <th rowspan="2">Major</th>
      <th rowspan="2">Credits</th>
    </tr>
    <tr>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Martha</td>
      <td>Jones</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Victor</td>
      <td>Nim</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Alexandra</td>
      <td>Petrov</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

Объединение ячеек

Для сопоставления и выравнивания ячеек заголовка с соответствующими столбцами и строками используются атрибуты colspan и rowspan элементов <th>. Значения, заданные в этих атрибутах, определяют, сколько ячеек охватывает каждая ячейка заголовка (<th>). Из-за способа задания этих атрибутов две ячейки заголовка во второй строке выравниваются со столбцами, которыми они управляют. Каждая из них охватывает одну строку и один столбец, так как значения по умолчанию для атрибутов colspan и rowspan равны 1.

Объединение столбцов и строк, показанное в этом примере, проиллюстрировано на следующей фигуре:

CSS

CSS остается без изменений по сравнению с предыдущим примером.

Результат

• Изучение таблиц HTML
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <tr>: Другие элементы, связанные с таблицами
• background-color: Свойство CSS для установки цвета фона каждой ячейки заголовка
• border: Свойство CSS для управления границами ячеек заголовка
• text-align: Свойство CSS для горизонтального выравнивания содержимого каждой ячейки заголовка
• vertical-align: Свойство CSS для вертикального выравнивания содержимого каждой ячейки заголовка