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

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

Попробуйте

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">TR-7</th>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <th scope="row">Khiresh Odo</th>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <th scope="row">Mia Oolong</th>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </tbody>
</table>

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

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

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

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

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

Атрибуты

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

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), автоматически размещаются в свободных местах структуры таблицы, охватывая ячейки размером 1×1, как показано на следующем рисунке:

  

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

Примеры

Полный пример таблицы, демонстрирующий общепринятые стандарты и рекомендации, см. в разделе <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: white;
}

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

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

Результат

Объединение столбцов и строк

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

HTML

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

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

<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 для выбора нужных ячеек заголовка