Тег <caption>
Описание
Тег <caption> добавляет заголовок к таблице, описывая её содержимое. Располагается непосредственно внутри тега <table> и должен идти первым дочерним элементом.
<table border="1">
<caption>Расписание занятий</caption>
<tr>
<th>Время</th>
<th>Предмет</th>
</tr>
<tr>
<td>09:00</td>
<td>Математика</td>
</tr>
</table>
<style>
caption {
caption-side: top;
font-weight: bold;
padding: 10px;
background: #f0f0f0;
}
</style>
<table>
<caption>Финансовый отчет за 2025 год</caption>
<!-- Содержимое таблицы -->
</table>
<table>
<caption style="caption-side: bottom"> Таблица 1: Результаты эксперимента </caption>
<tr>
<th>Параметр</th>
<th>Значение</th>
</tr>
</table>
Ключевые особенности:
- Должен быть первым элементом внутри
<table> - По умолчанию отображается над таблицей
- Поддерживает CSS-свойство
caption-side(top/bottom) - Важен для доступности (скринридеры объявляют заголовок перед таблицей)
- Может содержать другие HTML-элементы (например,
<em>,<strong>)
Рекомендации по использованию:
- Делайте заголовки краткими, но информативными
- Для сложных таблиц используйте
<caption>вместе с<th> - Избегайте использования только для визуального оформления
- Для нумерации таблиц можно использовать CSS-счетчики
Тег <caption> улучшает семантику и доступность табличных данных.
Атрибуты
| class | CSS-класс |
| contenteditable | Редактируемость |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрытие |
| id | Идентификатор |
| lang | Язык |
| spellcheck | Проверка орфографии |
| style | Инлайновые стили |
| title | Подсказка |
| translate | Перевод |
| align | Выравнивание (устарел) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 6.0 | 1.0 | 7.0 | 1.0 | 1.0 |