✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Альтернативы: нет

Тег <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> будет использоваться в качестве подписи некоторыми программами чтения с экрана.