Тег <th>: заголовочная ячейка и направление scope
Th обозначает ячейку, которая объясняет другие ячейки таблицы. Такой заголовок может находиться не только сверху, но и в начале строки с названием объекта.
Назначение
Th обозначает ячейку, которая объясняет другие ячейки таблицы. Такой заголовок может находиться не только сверху, но и в начале строки с названием объекта.
Как это работает
Scope="col" связывает простой заголовок со столбцом, scope="row" — со строкой. Используйте направления по структуре данных, а не по желаемой жирности текста. Для сложных многоуровневых связей могут понадобиться id и headers.
Пример
<table><caption>Параметры учебных страниц</caption><thead><tr><th scope="col">Страница</th><th scope="col">Разделов</th></tr></thead><tbody><tr><th scope="row">Введение</th><td>3</td></tr><tr><th scope="row">Практика</th><td>5</td></tr></tbody></table>Что должно получиться
Число 3 относится к строке «Введение» и колонке «Разделов». Эту связь выражает разметка, а не только расположение на экране. Точное озвучивание зависит от вспомогательной программы и её режима навигации.
Граница применения и частая ошибка
Не заменяйте th на td с font-weight:bold: внешний вид не создаёт заголовочную связь. Не используйте таблицу для раскладки обычных карточек. Сложные объединения ячеек лучше упрощать, когда без них содержание остаётся понятным.
Самостоятельная проверка
Обойдите таблицу по ячейкам с экранным диктором, если он доступен, и проверьте контекст чисел. Добавьте ещё один числовой столбец. Убедитесь, что каждому значению соответствует понятный заголовок строки и колонки.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.