Чем тег td в html отличается от th

Тег td в html хранит обычные данные, а <th> называет заголовок строки или колонки. От выбора элемента зависит смысл таблицы и подсказки скринридера. Разберем вложенность table, tr, td и th, атрибут scope, многоуровневые заголовки, caption и рабочие примеры разметки.

Что такое td в html?

HTML тег td расшифровывается как table data – «табличные данные». Он создает обычную ячейку со значением внутри строки.

Внутри <td> могут находиться текст, ссылки, изображения и другая допустимая HTML-разметка.

Элемент описывает значение, но не сообщает скринридеру название строки или колонки.

Что такое тег <th>?

Тег <th> расшифровывается как table header – «заголовок таблицы». Он обозначает ячейку, которая объясняет соседние данные или значения под ней.

Браузеры обычно показывают текст в <th> жирным шрифтом и выравнивают по центру.

Это стиль по умолчанию, а не причина выбирать элемент. Семантику задает роль ячейки, оформление меняет CSS.

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

Правила для элементов описаны в документации MDN для th, MDN для td и спецификации HTML.

Как table, tr, td и th вложены друг в друга

В HTML-таблице table содержит строки tr, а строка содержит ячейки td или th. Тег td обозначает обычную ячейку со значением.

Элемент tr не служит ячейкой. Он объединяет ячейки одной строки, а td и th лежат внутри него.

<table>
  <thead>
    <tr>
      <th scope="col">Товар</th>
      <th scope="col">Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Книга</td>
      <td>800 ₽</td>
    </tr>
  </tbody>
</table>

В первой строке два <th> называют колонки. В строке данных два <td> хранят значения этих колонок.

Заголовок строки ставьте в первой ячейке соответствующей строки. Такой вариант связывает название «Книга» с ее значением.

<table>
  <thead>
    <tr>
      <th scope="col">Товар</th>
      <th scope="col">Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Книга</th>
      <td>800 ₽</td>
    </tr>
  </tbody>
</table>

Чем отличаются td и th

Используйте <th>, когда ячейка объясняет смысл соседних данных. Для самого значения берите <td>.

Атрибуты colspan и rowspan объединяют позиции ячейки по колонкам и строкам. Атрибуты scope и headers задают связи заголовков с ячейками.

Когда стоит использовать <th>, а не <td>?

Ставьте <th>, когда текст объясняет данные в строке или колонке. Скринридер использует такую семантику, чтобы связать значение с его заголовком во время навигации по таблице.

Не берите <th> ради жирного или центрированного текста.

Не полагайтесь на стиль <th> по умолчанию: браузер может изменить оформление, а вспомогательная технология воспримет декоративную ячейку как заголовок.

При печати браузер может повторять содержимое <thead> на новых страницах. Заголовок колонки сохраняется рядом с продолжением таблицы, если таблица переносится на несколько страниц.

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

td {
  text-align: left;
  padding: 0.5rem;
}

th {
  text-align: left;
  background: #f2f2f2;
}

Атрибут scope у th

Атрибут scope уточняет, какие ячейки описывает заголовок. Значение col связывает заголовок с колонкой, а row – со строкой.

<table>
  <tr>
    <th scope="col">Месяц</th>
    <th scope="col">Продажи</th>
  </tr>
  <tr>
    <th scope="row">Январь</th>
    <td>120</td>
  </tr>
</table>

Здесь scope="col" связывает заголовки с колонками. «Январь» описывает строку, поэтому у него стоит scope="row".

Значение colgroup описывает группу колонок, которую задает элемент colgroup. Значение rowgroup описывает группу строк, например весь tbody.

Само по себе объединение ячеек через colspan или rowspan группу не создает.

<table>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <th scope="colgroup" colspan="2">Продажи</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" rowspan="2">Отдел A</th>
      <td>120</td>
    </tr>
    <tr>
      <td>140</td>
    </tr>
  </tbody>
</table>

Заголовок с scope="colgroup" относится к группе колонок, которую обозначает colgroup. Заголовок с scope="rowgroup" относится к строкам внутри своего tbody.

Подробные правила для td, th и scope собраны в документации MDN.

Как разметить сложную таблицу

Многоуровневые заголовки появляются, когда одна группа объединяет несколько колонок. Для колонок используют colspan, для строк – rowspan, а явную связь задают через id у заголовка и headers у данных.

<table>
  <caption>Продажи по кварталам</caption>
  <thead>
    <tr>
      <th id="product" rowspan="2">Товар</th>
      <th id="q1" colspan="2">Первый квартал</th>
    </tr>
    <tr>
      <th id="jan">Январь</th>
      <th id="feb">Февраль</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="book" scope="row">Книга</th>
      <td headers="product book q1 jan">120</td>
      <td headers="product book q1 feb">140</td>
    </tr>
  </tbody>
</table>

Ячейка «120» связана с заголовками «Товар», «Книга», «Первый квартал» и «Январь». Ячейка «140» получает тот же набор, но вместо «Январь» – «Февраль».

Атрибут headers содержит список значений id через пробел.

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

Зачем таблице нужен caption

Элемент <caption> дает таблице короткое название.

Подпись помогает понять назначение таблицы до перехода к отдельным ячейкам.

Ставьте <caption> первым дочерним элементом <table>. Формулируйте подпись конкретно: «Продажи по кварталам» полезнее, чем «Таблица 1».

Как проверить заголовки таблицы

Сохраните примеры в файл с расширением .html и откройте его в браузере. Для проверки с NVDA скачайте установщик программы с официального сайта проекта и установите ее в Windows.

Запустите NVDA из меню приложений. После запуска вернитесь в окно браузера с открытым примером. В режиме просмотра нажмите клавишу T, чтобы перейти к таблице.

Перемещайтесь между ячейками одной строки сочетаниями Ctrl+Alt+стрелка вправо и Ctrl+Alt+стрелка влево.

В примере со строкой «Январь» число «120» связано с заголовками «Продажи» и «Январь». Первый задает колонку через scope="col", второй – строку через scope="row".

В примере с товаром проверяйте строку, где «Книга» размечена как <th scope="row">. Значение «800 ₽» должно иметь связь с заголовками «Цена» и «Книга». В первом листинге «Книга» находится в <td>, поэтому заголовком строки она не служит.

В сложном примере проверьте, что ячейка «120» связана с четырьмя значениями из атрибута headers, а ячейка «140» – с тремя общими заголовками и «Февралем».

Точный порядок и повторение названий зависят от режима навигации и настроек скринридера.

Если скринридер читает только число, сравните каждое значение в headers с соответствующим id. В простой таблице проверяйте связи через scope, в сложной – явные связи headers и id.