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

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

Попробуйте

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

Атрибуты

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

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

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

align

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

bgcolor

Задаёт цвет фона каждой ячейки заголовка. Значением является цвет HTML: либо шестизначный шестнадцатеричный код цвета RGB с префиксом #, либо ключевое слово цвета. Другие значения CSS <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>.

Базовая структура заголовка

В этом примере показана таблица, разделённая на секцию заголовка со столбцовыми заголовками и секцию тела с основными данными таблицы.

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: white;
}

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>

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

Чтобы сопоставить ячейки заголовка с нужными столбцами и строками и выровнять их, для элементов <th> используются атрибуты colspan и rowspan. Значения этих атрибутов задают, сколько ячеек охватывает каждая ячейка заголовка (<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 для вертикального выравнивания содержимого ячеек заголовка