th, scope и элемент caption
Добавляйте таблице заголовок и правильные ячейки заголовков.
«th, scope и элемент caption» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Таблицы данных передают смысл
Настоящая таблица данных показывает связи между строками и столбцами. Если правильно разметить её, программы чтения с экрана смогут сообщать, к какому заголовку относится каждое значение.
Обычная таблица непонятна
Если каждая ячейка — просто td, программа чтения с экрана произносит числа без контекста. Пользователь слышит значения, но не понимает, что они означают.
<table>
<tr><td>Name</td><td>Score</td></tr>
<tr><td>Ada</td><td>92</td></tr>
</table>Для ячеек заголовков используйте th
Замените td в ячейках заголовков на th. Теперь браузер понимает, что эти ячейки обозначают данные, а не содержат их, и представляет их как заголовки.
<tr><th>Name</th><th>Score</th></tr>Почему th всё меняет
Элемент th объявляется как заголовок и может быть связан с описываемыми им ячейками. Именно эта связь придаёт смысл одиноким числам.
Атрибут scope
Добавьте scope к каждому th, чтобы указать, какие ячейки он охватывает. Значение col используется для заголовка столбца, а row — для заголовка строки.
<th scope="col">Score</th>scope=col для верхних заголовков
Используйте scope=col для заголовка в верхней части столбца. Каждая расположенная ниже ячейка наследует эту метку, когда пользователь перемещается вниз.
<th scope="col">City</th>scope=row для боковых заголовков
Используйте scope=row для первой ячейки строки, если она обозначает эту строку, например содержит имя человека или дату у левого края.
<th scope="row">Ada</th>caption называет таблицу
Элемент caption задаёт название всей таблицы. Пользователи программ чтения с экрана услышат его первым и поймут, что именно сейчас будут изучать.
<table>
<caption>Quiz scores by student</caption>
</table>caption должен идти первым
Разместите caption самым первым дочерним элементом внутри таблицы, сразу после открывающего тега. Любое другое положение недействительно, и элемент могут проигнорировать.
caption лучше заголовка
Одного расположенного рядом h2 недостаточно. caption программно связан с таблицей, поэтому пользователи увидят название даже при переходе от одной таблицы к другой.
Полная простая таблица
Сначала caption, затем строка заголовков из th со scope, а после неё строки данных. Такая основа делает большинство простых таблиц полностью доступными без ARIA.
<table>
<caption>Scores</caption>
<tr><th scope="col">Name</th><th scope="col">Score</th></tr>
<tr><th scope="row">Ada</th><td>92</td></tr>
</table>Быстрая проверка
Вы размечаете заголовок столбца в верхней части таблицы.
Итоги: три строительных блока
Вы изучили три элемента доступных таблиц: th для заголовков, scope для указания их области и caption для названия таблицы. Большая часть работы выполнена.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «th, scope и элемент caption» бесплатный?
Да — полный текст урока «th, scope и элемент caption» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «th, scope и элемент caption»?
Добавляйте таблице заголовок и правильные ячейки заголовков. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «th, scope и элемент caption»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- th, scope и элемент caption
- Правильные заголовки строк и столбцов
- Сложные таблицы: связывание headers и id
- Таблицы для разметки — ловушка