<caption> - заголовок таблиці

HTML-тег <caption> визначає заголовок таблиці. Він має бути першим дочірнім елементом у <table>.

Елемент <caption> використовується для додавання заголовка до таблиці. Це допомагає користувачам, особливо тим, хто використовує скрінрідери, зрозуміти контекст табличних даних.

За замовчуванням, заголовок відображається над таблицею і центрується по горизонталі. Його положення можна змінити за допомогою CSS-властивості caption-side.

У таблиці може бути лише один елемент <caption>, і він повинен бути розміщений одразу після відкриваючого тегу <table>.

HTML
<table>
  <caption>...</caption>
  ...
</table>

Атрибути

Цей тег може мати глобальні атрибути.

align

Визначає положення заголовка відносно таблиці. Можливі значення:

left: Зліва від таблиці.
right: Справа від таблиці.
top: Над таблицею (значення за замовчуванням).
bottom: Під таблицею.

Цей атрибут застарів. Використовуйте CSS-властивості caption-side та text-align.

Технічне резюме

Категорія контенту	Немає.
Дозволений вміст	Потоковий контент, але без елементів `<table>`.
Пропуск тегів	Початковий тег є обов’язковим. Кінцевий тег може бути пропущений, якщо за ним не слідує пробіл або коментар.
Дозволені батьківські елементи	Елемент `<table>`. Він має бути першим дочірнім елементом.
Роль ARIA	Немає відповідної ролі.
DOM інтерфейс	`HTMLTableCaptionElement`

Приклади використання

<table>
  <caption>Щомісячні заощадження</caption>
  <thead>
    <tr>
      <th>Місяць</th>
      <th>Сума</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Січень</td>
      <td>100 грн</td>
    </tr>
    <tr>
      <td>Лютий</td>
      <td>150 грн</td>
    </tr>
  </tbody>
</table>

<table>
  <caption class="styled-caption">
    Результати першого кварталу
  </caption>
  <thead>
    <tr>
      <th>Продукт</th>
      <th>Продажі</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>1200</td>
    </tr>
    <tr>
      <td>B</td>
      <td>1800</td>
    </tr>
  </tbody>
</table>

.styled-caption {
  caption-side: bottom;
  color: #666;
  font-style: italic;
  text-align: right;
  padding: 5px;
}

Стилі за замовчуванням

CSS
caption {
  display: table-caption;
  text-align: center;
}

Підтримка браузерів



`<caption>`
`align`