✔️ Актуальный | Альтернативы: нет |
Тег <caption>
позволяет добавить заголовок или подпись к таблице. Информация тега <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>
- Создать заголовок или пояснение к таблице.
- Создать описание для содержимого таблицы.
- Сделать таблицу более доступной для пользователей с ограниченными возможностями.
- Добавить дополнительную информацию о содержании таблицы, например, о её источнике или методологии.
- Организовать и отобразить табличные данные в понятном и легко читаемом формате.
- Отделить таблицу от другого содержимого веб-страницы.
- Сгруппировать связанные таблицы на веб-странице.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <caption>
должен быть размещён сразу после тега <table>
и перед тегами <tr>
или <td>
.
Нюансы
Бывает, что без заголовка таблицы не обойтись. Рассмотрим такой пример:
В таблице непонятно, кличка какого животного и что за порядковый номер. Однако с заголовком, таблица приобретёт смысл:
💡 Лучше добавлять заголовок, чтобы пользователь точно понимал, о чём будет речь в таблице.
Если тег <caption>
не используется, то первый элемент <td>
в <table>
будет использоваться в качестве подписи некоторыми программами чтения с экрана.