HTML тег th - Изучение HTML

Тег <th> определяет ячейку заголовка в HTML-таблице. Он должен использоваться как дочерний элемент <tr>, который, в свою очередь, размещается внутри тега <table>. Для определения обычной ячейки с данными используется тег <td>.

На этой странице рассматривается, что делает <th>, как объединять ячейки с помощью colspan и rowspan, и — что наиболее важно — как сделать заголовки таблиц доступными с помощью атрибута scope и шаблона id/headers, чтобы программы чтения с экрана могли правильно озвучивать заголовок для каждой ячейки.

Тег <th> может содержать текст, изображения, формы, ссылки или любой другой HTML-элемент, который можно использовать в теле HTML-документа. Размер таблицы автоматически подстраивается под размер её содержимого.

В HTML-таблицах данные располагаются вертикально в столбцах. Если вы хотите отобразить первую строку таблицы как метки или заголовки, необходимо использовать элементы <th> вместо элементов <td> для этой строки. По умолчанию содержимое тега <th> отображается жирным шрифтом и выравнивается по центру. Для изменения внешнего вида можно использовать стили CSS. Заголовки таблицы также легко стилизовать независимо от остального содержимого таблицы.

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

Синтаксис

Тег <th> используется парами. Содержимое записывается между открывающим (<th>) и закрывающим (</th>) тегами.

HTML-тег <th>

<table> 
  <tr> 
    <th>...</th> 
  </tr> 
</table>

Пример HTML-тега `<th>`:

Месяц и дата — пример HTML-тега <th> — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>June</td>
          <td>18.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Попробуйте сами »

Результат

В этом примере заголовками являются «Month» и «Date», которые определяются с помощью тегов <th>. Оба тега размещаются внутри элемента <tr>.

Атрибут colspan, как правило, используется вместе с тегом <th>, чтобы содержимое занимало несколько столбцов. Рассмотрим это на практике.

Пример HTML-тега `<th>` с атрибутом colspan:

Пример с атрибутом colspan — HTML-тег <th> — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      tr {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th colspan="2">Month and Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jun</td>
          <td>18.07.2014</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Попробуйте сами »

В этом примере значение атрибута colspan равно "2". Это означает, что единственная ячейка заголовка растягивается на два столбца.

Пример HTML-тега `<th>` с атрибутом rowspan

Атрибут rowspan — это вертикальный аналог colspan: он заставляет ячейку заголовка охватывать несколько строк. Это полезно, когда один заголовок относится к нескольким строкам данных.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: 30px auto;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Day</th>
          <th>Slot</th>
          <th>Activity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th rowspan="2" scope="rowgroup">Monday</th>
          <td>Morning</td>
          <td>HTML basics</td>
        </tr>
        <tr>
          <td>Afternoon</td>
          <td>CSS basics</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Здесь ячейка заголовка «Monday» использует rowspan="2", поэтому она охватывает и утреннюю, и послеобеденную строки.

Атрибут scope

Наиболее важной функцией доступности тега <th> является атрибут scope. Он сообщает вспомогательным технологиям — в особенности программам чтения с экрана — какие ячейки описывает данный заголовок. Зрячие пользователи определяют это по расположению элементов, но программа чтения с экрана читает ячейки по одной и нуждается в scope, чтобы озвучивать правильный заголовок перед каждой ячейкой с данными.

scope принимает четыре значимых значения:

Значение	Заголовок применяется к…
`col`	каждой ячейке в столбце ниже него
`row`	каждой ячейке в строке справа от него
`colgroup`	группе столбцов (используется с `<colgroup>`)
`rowgroup`	группе строк (например, всем строкам внутри одного `<tbody>`)

Таблица может иметь заголовки в обоих направлениях. Заголовки столбцов размещаются в <thead> с scope="col"; ведущий ярлык строки — это <th scope="row"> внутри <tbody>.

Пример полностью доступной таблицы с использованием scope

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: 30px auto;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
        text-align: left;
      }
      thead th,
      tbody th {
        background-color: #1c87c9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Weekly study plan</caption>
      <thead>
        <tr>
          <th scope="col">Day</th>
          <th scope="col">Topic</th>
          <th scope="col">Hours</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Monday</th>
          <td>HTML</td>
          <td>2</td>
        </tr>
        <tr>
          <th scope="row">Tuesday</th>
          <td>CSS</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Когда пользователь программы чтения с экрана оказывается на ячейке со значением 3, она может сообщить «Tuesday, Hours, 3», поскольку заголовок столбца (scope="col") и заголовок строки (scope="row") однозначно определены.

Доступность

Почему scope важен

Таблица данных — это сетка связей: каждый <td> принадлежит одному или нескольким заголовкам. Зрячие пользователи воспринимают эти связи визуально; пользователи программ чтения с экрана — нет. Маркировка ячеек заголовков тегом <th> и указание правильного scope позволяет вспомогательным технологиям озвучивать нужный заголовок по мере того, как пользователь перемещается по таблице. Без этого сложная таблица превращается в поток несвязанных значений.

`<th>` против `<td role>`

Всегда используйте настоящий элемент <th> для заголовков, а не стилизуйте <td> под жирный шрифт. Тег <th> автоматически несёт семантику заголовка; обычный <td> — нет, независимо от внешнего вида. Использование role="columnheader" или role="rowheader" для <td> должно быть крайней мерой (например, когда нельзя изменить разметку). Нативный <th> с scope проще и лучше поддерживается.

Шаблон `id` / `headers` для сложных таблиц

scope хорошо работает для простых сеток, но не может выразить все связи в таблицах с нерегулярными объединениями ячеек или несколькими уровнями заголовков. В таких случаях присвойте каждому заголовку атрибут id и укажите соответствующие идентификаторы заголовков для каждой ячейки с данными через атрибут headers (через пробел). Это явно привязывает каждую ячейку к её заголовкам.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table { border-collapse: collapse; margin: 30px auto; }
      th, td { padding: 10px; border: 1px solid #666; }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th id="name">Name</th>
          <th id="q1">Q1</th>
          <th id="q2">Q2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th id="alice" headers="name">Alice</th>
          <td headers="alice q1">120</td>
          <td headers="alice q2">150</td>
        </tr>
        <tr>
          <th id="bob" headers="name">Bob</th>
          <td headers="bob q1">90</td>
          <td headers="bob q2">110</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Теперь ячейка со значением 150 явно связана с заголовком строки Alice и заголовком столбца Q2, поэтому программа чтения с экрана может сообщить «Alice, Q2, 150» без каких-либо догадок.

Атрибут `abbr`

Когда полный текст заголовка длинный, атрибут abbr предоставляет его сокращённую версию. Некоторые речевые браузеры читают эту сокращённую форму (вместо повторения длинного заголовка) каждый раз при озвучивании ячейки в этом столбце, что значительно упрощает навигацию по широким таблицам.

<th scope="col" abbr="HDI">Human Development Index</th>

Видимый текст остаётся «Human Development Index», но программа чтения с экрана может озвучивать каждую ячейку в этом столбце просто как «HDI».

Атрибуты

В HTML5 допустимы только abbr, colspan, rowspan, headers и scope. Строки, помеченные как Устаревшие, — это устаревшие атрибуты представления — не используйте их; вместо этого добивайтесь того же результата с помощью CSS.

Атрибут	Значение	Описание
abbr	text	Определяет сокращённую версию содержимого ячейки заголовка. Некоторые пользовательские агенты, например программы чтения с экрана, могут озвучивать эту краткую форму вместо полного текста.
colspan	number	Определяет количество столбцов, которое должна охватывать ячейка. Значение должно быть положительным целым числом. Значение по умолчанию — 1.
headers	header_id	Список идентификаторов ячеек заголовков, разделённых пробелами, которые описывают данную ячейку. Каждое значение должно совпадать с атрибутом `id` ячейки заголовка. Используется для сложных таблиц.
rowspan	number	Количество строк, которое должна охватывать ячейка. Значение должно быть положительным целым числом. По умолчанию — 1. Значения выше 65534 обрезаются до 65534.
scope	col / colgroup / row / rowgroup	Указывает, к каким ячейкам относится заголовок. Необходим для доступности таблиц.
align	left / right / center	Устаревший. Выравнивал содержимое. Используйте CSS `text-align`.
axis	category_name	Устаревший. Группировал ячейки со схожим содержимым.
background	url	Устаревший. Задавал фоновое изображение. Используйте CSS `background`.
bgcolor	rgb(x,x,x) / #xxxxxx / colorname	Устаревший. Задавал цвет фона. Используйте CSS `background-color`.
bordercolor	color	Устаревший. Задавал цвет границы. Используйте CSS `border`.
char	character	Устаревший. Выравнивал содержимое по символу (только с `align="char"`).
charoff	number	Устаревший. Смещение символа выравнивания.
height	% / pixels	Устаревший. Задавал высоту ячейки. Используйте CSS `height`.
nowrap	nowrap	Устаревший. Запрещал перенос содержимого. Используйте CSS `white-space: nowrap`.
sorted	(various)	Устаревший. Определял направление сортировки столбца.
valign	top / middle / bottom / baseline	Устаревший. Вертикальное выравнивание. Используйте CSS `vertical-align`.
width	% / pixels	Устаревший. Задавал ширину ячейки. Используйте CSS `width`.

Тег <th> также поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать HTML-тег `<th>`

th {
  background-color: #f2f2f2;
  color: #333;
  padding: 8px;
  border: 1px solid #ccc;
}

Связанные теги

<table> — контейнер таблицы
<tr> — строка таблицы
<td> — стандартная ячейка с данными
<thead> — группирует строки заголовка
<tbody> — группирует строки тела таблицы
<caption> — заголовок таблицы

Практика

Какова основная цель HTML-элемента th?

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

Синтаксис

Пример HTML-тега <th>: