<caption>

Что делает тег

Тег <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.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.