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

Элемент <th> HTML определяет ячейку как заголовок группы ячеек таблицы и может использоваться в качестве дочернего элемента элемента <tr>. Точный характер этой группы определяется атрибутами scope и headers.

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

abbr

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

colspan

Целое неотрицательное значение, указывающее, сколько столбцов охватывает или расширяет ячейка заголовка. Значение по умолчанию равно 1. Пользовательские агенты игнорируют значения, превышающие 1000, как неверные, принимая такие значения по умолчанию как 1.

headers

Список разделенных пробелами строк, соответствующих атрибутам id элементов <th>, которые предоставляют заголовки для этой ячейки заголовка.

rowspan

Целое неотрицательное значение, указывающее, сколько строк охватывает или расширяет ячейка заголовка. Значение по умолчанию равно 1; если его значение установлено в 0, ячейка заголовка будет расширяться до конца раздела группировки таблицы (<thead>, <tbody>, <tfoot>, даже если она определена неявно), к которому относится <th>. Значения, превышающие 65534, обрезаются до 65534.

scope

Определяет ячейки, к которым относится заголовок (определенный в элементе <th>). Возможные значения:

• row: заголовок относится ко всем ячейкам строки, к которой он принадлежит;
• col: заголовок относится ко всем ячейкам столбца, к которому он принадлежит;
• rowgroup: заголовок относится к группе строк и относится ко всем её ячейкам;
• colgroup: заголовок относится к группе столбцов и относится ко всем её ячейкам.

Если атрибут scope не указан или его значение не равно row, col, rowgroup, или colgroup, браузеры автоматически выбирают набор ячеек, к которому относится ячейка заголовка.

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

align Устарело

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

axis Устарело

Содержит список разделенных пробелами строк, каждая из которых соответствует атрибуту id группы ячеек, к которым относится ячейка заголовка. Используйте атрибут scope вместо этого, так как этот атрибут устарел.

bgcolor Устарело

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

char Устарело

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

charoff Устарело

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

height Устарело

Определяет рекомендуемую высоту ячейки заголовка. Используйте CSS-свойство height вместо этого атрибута, так как он устарел.

valign Устарело

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

width Устарело

Определяет рекомендуемую ширину ячейки заголовка. Используйте CSS-свойство width вместо этого атрибута, так как он устарел.

• Этот элемент <th> может использоваться только внутри элемента <tr>.
• В простых контекстах использование атрибута scope в ячейках заголовка (элементы <th> ) избыточно, так как scope подразумевается. Однако некоторые программы для помощи людям с ограниченными возможностями могут неверно подразумевать его, поэтому указание области заголовка может улучшить пользовательский опыт.
• При использовании атрибутов colspan и rowspan для объединения ячеек заголовка по нескольким столбцам и строкам, ячейки без указанных атрибутов (с значением по умолчанию 1) автоматически подстраиваются под свободные места в структуре таблицы, занимая 1x1 ячейку, как показано на рисунке ниже:

  Примечание: Эти атрибуты не должны использоваться для перекрытия ячеек.

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

В этом примере используются элементы <th> для введения заголовков столбцов и строк в базовой структуре таблицы.

HTML

Первая строка (<tr> элемент) содержит заголовки столбцов (<th> элементы), которые служат "заголовками" для столбцов, чтобы упростить понимание информации в столбцах и идентификацию данных. Чтобы указать, что каждый заголовок столбца относится ко всем ячейкам в соответствующем столбце, атрибут scope устанавливается в значение col (столбец).

Остальные строки содержат основные данные таблицы. Каждая из этих строк имеет заголовок строки (<th> элемент), представленный в первой ячейке. Это создаёт столбец с заголовками строк в качестве первого столбца таблицы. Аналогично заголовкам столбцов, атрибут scope устанавливается в значение row для указания, к каким ячейкам относится каждый заголовок строки, а в данном примере это все ячейки данных (<td> элементы) в каждой row.

<table>
  <tr>
    <th scope="col">Symbol</th>
    <th scope="col">Code word</th>
    <th scope="col">Pronunciation</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

Для стилизации таблицы и её ячеек используется несколько основных правил CSS. Мы используем CSS селекторы атрибутов, чтобы выбрать ячейки заголовков на основе значений их атрибутов scope, выделяя заголовки столбцов и строк (<th> элементы) и разделяя их друг от друга и от ячеек данных (<td>).

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

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

Результат

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

HTML

В качестве второй строки заголовков таблицы добавлена дополнительная строка таблицы (<tr> элемент) с двумя дополнительными заголовками столбцов (<th> элементы). Таким образом, столбец "Произношение" разделен на два столбца: один для обозначения МФА (Международного фонетического алфавита) и один для транскрипции (оригинальный столбец произношения). Соответствующие ячейки данных (<td> элементы) добавляются в каждую последующую строку.

Как показано в примечаниях к использованию, атрибуты colspan и rowspan могут использоваться для элементов <th> для распределения ячеек заголовков по правильным столбцам и строкам. Чтобы получить "двухстрочный" заголовок в структуре таблицы, первые две ячейки заголовков в первом элементе <tr> охватывают две строки. Третья ячейка заголовка охватывает два столбца (оставаясь в первой строке). Эта настройка оставляет две доступные области в третьем и четвёртом столбцах во второй строке, где автоматически размещаются два заголовка в элементе <tr> со значениями по умолчанию 1 для атрибутов colspan и rowspan.

<table>
  <tr>
    <th scope="col" rowspan="2">Symbol</th>
    <th scope="col" rowspan="2">Code word</th>
    <th scope="col" colspan="2">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col">IPA</th>
    <th scope="col">Respelling</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>ˈælfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>ˈbraːˈvo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>ˈtʃɑːli</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>ˈdeltɑ</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

CSS не изменён по сравнению с предыдущим примером .

Результат

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

HTML

Для повышения доступности предыдущего примера и для того, чтобы программы чтения с экрана, например, могли озвучить заголовки, связанные с каждой ячейкой заголовка, атрибут headers может быть использован наряду с атрибутами id. Ввиду того, как столбец "Произношение" разделен на два столбца в данном примере (добавление "двухстрочного" заголовка), программы вспомогательных технологий, такие как программы чтения с экрана, могут не определить, к каким дополнительным ячейкам заголовка (th элементы) относится ячейка заголовка "Произношение", и наоборот. Поэтому используется атрибут headers для ячеек заголовков "Произношение", "МФА" и "Транскрипция", чтобы связать соответствующие ячейки заголовков на основе значений уникальных идентификаторов, добавленных атрибутов id в виде списка, разделённого пробелами.

<table>
  <tr>
    <th scope="col" rowspan="2">Symbol</th>
    <th scope="col" rowspan="2">Code word</th>
    <th scope="col" colspan="2" id="p" headers="i r">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col" id="i" headers="p">IPA</th>
    <th scope="col" id="r" headers="p">Respelling</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>ˈælfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>ˈbraːˈvo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>ˈtʃɑːli</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>ˈdeltɑ</td>
    <td>DELL tah</td>
  </tr>
</table>

Результат

Визуальный результат не изменён по сравнению с предыдущей таблицей примера .

• Учебник: HTML таблицы
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <thead>, <tr>: Другие элементы, связанные с таблицами
• background-color: Свойство CSS для установки цвета фона каждой ячейки заголовка
• border: Свойство CSS для управления границами ячеек заголовка
• height: Свойство CSS для управления рекомендуемой высотой ячейки заголовка
• text-align: Свойство CSS для горизонтального выравнивания содержимого каждой ячейки заголовка
• vertical-align: Свойство CSS для вертикального выравнивания содержимого каждой ячейки заголовка
• width: Свойство CSS для управления рекомендуемой шириной ячейки заголовка
• :nth-of-type, :first-of-type, :last-of-type: Псевдоклассы CSS для выбора необходимых ячеек заголовка