Тег <th>

Ячейка-заголовок
  • Категории: Отсутствует
  • Контекст:

    Как дочерний элемент <tr>.

  • Модель:

    Потоковое содержимое, но без элементов header, footer, секционного содержимого и заголовков.

Тег <th> (сокращение от "table header" - заголовок таблицы) предназначен для создания ячейки, которая выступает в качестве заголовка для группы ячеек <td>. А точное назначение этой группы определяется атрибутами scope и headers.

Заголовки таблицы также располагаются внутри строк <tr> и работают аналогичным образом, но имеют небольшое визуальное оформление по умолчанию - содержимое выделяется полужирным и выравнивается по центру.

Атрибуты

  • Глобальные атрибуты
  • colspan - количество столбцов, которые должна охватывать ячейка
  • rowspan - количество строк, которые должна охватывать ячейка
  • headers - перечисление связанных заголовков
  • scope - указывает, к каким ячейкам применяется ячейка заголовка
  • abbr - альтернативная метка заголовка

  • Заголовки столбцов

    Заголовки таблицы позволяют понять назначение ее данных. Мы не можем использовать для их разметки элементы <td>, поскольку это не основные табличные данные, а вспомогательная информация. Чтобы показать, что наши заголовки относятся именно к ячейкам рядов, мы можем дополнительно использовать атрибут scopeв значении col.

  • Заголовки строк

    Заголовки таблицы не обязательно должны относиться к ее колонкам. Мы точно также можем перевернуть таблицу и при помощи заголовков описывать уже ее ряды. При этом нам также лучше использовать атрибут scope, но уже в значении row, чтобы точно показать, к чему относятся заголовки таблицы.

  • Группа заголовков

    При помощи атрибутов colspan и rowspan мы можем объединять несколько соседних ячеек. Для этих целей атрибут scope имеет еще два соответствующих значений:

    • colgroup - если заголовок описывает группу колонок
    • rowgroup - если заголовок описывает группу рядов

    Также, когда у нашей таблицы есть общий заголовок для группы подзаголовков, мы можем использовать атрибут headers, чтобы их связать. Для этого главному заголовку мы даем атрибут id, а подзаголовкам атрибут headers, где через пробел можем перечислить несколько значений. Это может быть особенно полезно для речевых браузеров и других программ:

Поделитесь данной записью с друзьями