<caption>
- 25 января 2023
Что делает тег
Тег <caption>
позволяет добавить заголовок или подпись к таблице. Информация тега <caption>
всегда отображается над таблицей.
Синтаксис тега <caption>
<table>
<caption>Подпись к таблице</caption>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Строка 1, колонка 1</td>
<td>Строка 1, колонка 2</td>
</tr>
<tr>
<td>Строка 2, Колонка 1</td>
<td>Строка 2, Колонка 2</td>
</tr>
</table>
Спецификация HTML
Тег <caption>
является частью спецификации HTML Living Standard.
Семантический или нет
Тег <caption>
является семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Добавление простой надписи:
<table>
<caption>Заголовок таблицы</caption>
<tr>
<td>Строка 1, колонка 1</td>
<td>Строка 1, колонка 2</td>
</tr>
<tr>
<td>Строка 2, колонка 1</td>
<td>Строка 2, колонка 2</td>
</tr>
</table>
Добавление надписи с более сложным форматированием:
<table>
<caption><h2>Подпись таблицы</h2><p>Описание содержимого таблицы</p></caption>
<tr>
<td>Строка 1, столбец 1</td>
<td>Строка 1, колонка 2</td>
</tr>
<tr>
<td>Строка 2, колонка 1</td>
<td>Строка 2, колонка 2</td>
</tr>
</table>
Добавление информации к таблице с подписями и резюме:
<table>
<caption>Месячные расходы</caption>
<thead>
<tr>
<th>Категория расходов</th>
<th>Сумма</th>
</tr>
</thead>
<tbody>
<tr>
<td>Рент</td>
<td>25 000 ₽</td>
</tr>
<tr>
<td> Коммунальные услуги</td>
<td>2500 ₽</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Сумма:</td>
<td>27 500 ₽</td>
</tr>
</tfoot>
</table>
Для чего использовать тег <caption>
- Создать заголовок или пояснение к таблице.
- Создать описание для содержимого таблицы.
- Сделать таблицу более доступной для пользователей с ограниченными возможностями.
- Добавить дополнительную информацию о содержании таблицы, например, о её источнике или методологии.
- Организовать и отобразить табличные данные в понятном и легко читаемом формате.
- Отделить таблицу от другого содержимого веб-страницы.
- Сгруппировать связанные таблицы на веб-странице.
Атрибуты тега <caption>
У тега <caption>
нет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <caption>
должен быть размещён сразу после тега <table>
и перед тегами <tr>
или <td>
.
Нюансы
Бывает, что без заголовка таблицы не обойтись. Рассмотрим такой пример:

По таблице таблице непонятно, кличка какого животного указана, и что это за порядковый номер. Однако с заголовком таблица приобретёт смысл:

💡 Лучше добавлять заголовок, чтобы пользователь точно понимал, о чём будет речь в таблице.
Если тег <caption>
не используется, то первый элемент <td>
в <table>
будет использоваться в качестве подписи некоторыми программами чтения с экрана.
Поддержка браузерами
Тег <caption>
поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <caption>
не существует.
Чем заменить тег
Прямой замены тегу <caption>
не существует.
Актуальность
Тег <caption>
актуален и широко используется.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023