Таблица с caption и scope: понятные заголовки данных
Caption задаёт название таблицы, а th со scope связывает заголовки со строками или столбцами. Эти элементы помогают воспринимать данные без опоры только на визуальное расположение.
Назначение
Caption задаёт название таблицы, а th со scope связывает заголовки со строками или столбцами. Эти элементы помогают воспринимать данные без опоры только на визуальное расположение.
Как это работает
Подпись ставят первым дочерним элементом table. Scope=col обозначает заголовок колонки, scope=row — заголовок строки. Для простой таблицы этого достаточно, чтобы явно описать основные связи.
Пример
<style>.report{border-collapse:collapse;width:100%}.report caption{text-align:left;font-weight:700;margin-bottom:8px}.report th,.report td{border:1px solid #a6b3ab;padding:8px;text-align:left}.report thead{background:#edf4ef}</style>
<table class="report"><caption>Результаты проверки файлов</caption><thead><tr><th scope="col">Файл</th><th scope="col">Статус</th></tr></thead><tbody><tr><th scope="row">index.html</th><td>Проверен</td></tr><tr><th scope="row">style.css</th><td>Требует проверки</td></tr></tbody></table>Что должно получиться
Таблица имеет собственное название, два заголовка столбцов и явные заголовки строк. Даже без CSS различие между заголовками и значениями остаётся частью разметки.
Граница применения и частая ошибка
Не используйте table только для раскладки карточек и меню. Сложные многоуровневые таблицы могут требовать дополнительных связей headers/id; простое добавление scope ко всем ячейкам не гарантирует корректную структуру.
Самостоятельная проверка
Отключите стили и проверьте сохранение смысла. В дереве доступности изучите название таблицы и заголовки ячеек. Добавьте строку с длинным именем файла и проверьте представление на узком экране.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.