Тег <caption>: название таблицы в её разметке
Caption связывает название с конкретной таблицей. Это помогает понять, какие данные представлены, особенно когда на странице несколько таблиц похожей структуры.
Назначение
Caption связывает название с конкретной таблицей. Это помогает понять, какие данные представлены, особенно когда на странице несколько таблиц похожей структуры.
Как это работает
Поместите один caption первым дочерним элементом table. В нём кратко укажите предмет данных и при необходимости единицы или период. Заголовки столбцов и строк по-прежнему описываются элементами th.
Пример
<table>
<caption>Продолжительность учебных упражнений, минуты</caption>
<thead><tr><th scope="col">Упражнение</th><th scope="col">Время</th></tr></thead>
<tbody><tr><th scope="row">Разметка списка</th><td>10</td></tr><tr><th scope="row">Оформление карточки</th><td>15</td></tr></tbody>
</table>Что должно получиться
Название относится именно к таблице, а единица измерения не требует догадки. Даже без декоративных стилей таблица сохраняет подпись и различимые заголовочные ячейки.
Граница применения и частая ошибка
Не используйте устаревший атрибут summary вместо подходящего пояснения. Caption не исправляет сложную таблицу с неправильно связанными заголовками. Длинный методический разбор лучше разместить рядом, сохранив название кратким.
Самостоятельная проверка
Добавьте на страницу вторую таблицу с другой задачей. Отключите стили и проверьте, можно ли определить назначение каждой по подписи. Если меняете caption-side, убедитесь, что название не теряется среди соседнего текста.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.