HTML тег <caption>
Тег HTML <caption> задаёт заголовок таблицы и должен быть первым дочерним элементом <table>. Синтаксис, стилизация и доступность.
Тег <caption> используется для задания заголовка или описания таблицы. Он не является заголовком столбца (для этого используйте <th>). Тег должен находиться внутри элемента <table> сразу после открывающего тега и быть первым дочерним элементом родительского элемента <table>. В одной таблице допускается только один заголовок.
По умолчанию заголовок таблицы выравнивается по центру над таблицей. Для изменения выравнивания и позиции заголовка можно использовать свойства text-align и caption-side.
Когда использовать <caption>, а когда <figcaption>
Существуют два способа подписать таблицу, и выбор правильного зависит от контейнера таблицы:
- Используйте
<caption>, когда таблица стоит самостоятельно. Заголовок размещается внутри<table>и программно связан с ней. - Используйте
<figcaption>, когда таблица является единственным содержимым элемента<figure>. В этом случае подпись обеспечивается элементом figure, поэтому отдельный<caption>не используется.
<figure>
<table>
<thead>
<tr>
<th>Planet</th>
<th>Diameter (km)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Earth</td>
<td>12,742</td>
</tr>
<tr>
<td>Mars</td>
<td>6,779</td>
</tr>
</tbody>
</table>
<figcaption>Diameters of the inner planets</figcaption>
</figure>Здесь таблица является единственным содержимым figure, поэтому подпись размещается в <figcaption> (который, в отличие от <caption>, также может располагаться после таблицы).
Синтаксис
Тег <caption> используется парно. Содержимое записывается между открывающим (<caption>) и закрывающим (</caption>) тегами.
Пример HTML тега <caption>:
HTML тег <caption>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table { width: 400px; border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 4px; }
</style>
</head>
<body>
<table>
<caption>Evaluation paper</caption>
<thead>
<tr>
<th>Student</th>
<th>1st exam</th>
<th>2nd exam</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Johnson</td>
<td>75</td>
<td>65</td>
</tr>
<tr>
<td>Mary Nicolson</td>
<td>55</td>
<td>80</td>
</tr>
<tr>
<td>Max Thomson</td>
<td>60</td>
<td>47</td>
</tr>
</tbody>
</table>
</body>
</html>Результат
Отрендеренная таблица отображает заголовок «Evaluation paper», выровненный по центру над данными:
Пример HTML тега <caption> со свойством CSS caption-side:
Пример HTML тега <caption> со свойством CSS caption-side
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #cccccc;
color: #666666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "bottom":</p>
<table>
<caption>Some title here</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | left, right, center, top, bottom | Выравнивает заголовок по горизонтали или вертикали. Не используется в HTML5. Вместо этого используйте CSS caption-side. |
Тег <caption> поддерживает глобальные атрибуты и атрибуты событий.
Доступность: зачем нужен <caption>
<caption> — это не просто видимый заголовок, это доступное имя таблицы. Поскольку элемент является дочерним по отношению к <table>, браузеры автоматически связывают их; атрибуты aria-labelledby или дополнительная разметка не нужны. Когда программа чтения с экрана переходит к таблице, она сначала озвучивает заголовок, давая пользователю контекст («Evaluation paper, таблица с 3 столбцами») до чтения ячеек. Без заголовка пользователь слышит поток чисел без понимания того, что они означают.
Когда заголовок нужно скрыть визуально
Иногда рядом с таблицей уже есть заголовок раздела, и видимый caption выглядит излишним. Не убирайте caption — это лишит незрячих пользователей контекста. Вместо этого сохраните <caption> и скройте его визуально с помощью CSS, оставив в дереве доступности:
caption.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}Атрибут aria-label на элементе <table> также может предоставить доступное имя, однако <caption> предпочтительнее: он работает без ARIA, является частью текста документа (поэтому переводится и доступен для поиска), а техника визуального скрытия сохраняет его читаемым для зрячих разработчиков. Прибегайте к aria-label только в случае, когда добавить caption в разметку невозможно.
<caption> заменяет устаревший атрибут summary
В старом HTML существовал атрибут summary у <table>, содержавший описание для пользователей программ чтения с экрана. Он никогда не был виден на экране и устарел в HTML5 — не используйте его. Современная доступная замена — <caption> для краткого заголовка плюс обычный абзац (при необходимости связанный через aria-describedby) для более подробного описания структуры таблицы.
Стилизация тега <caption>
Caption является блочным боксом, который можно стилизовать как любой другой элемент. Наиболее распространённые настройки — позиция относительно таблицы, выравнивание и выделение текста:
caption {
caption-side: bottom; /* move the caption below the table (default is top) */
text-align: left; /* override the default centering */
font-weight: bold;
padding: 6px;
color: #1c87c9;
}Подробнее о свойствах caption-side и text-align, а также о полной разметке таблицы — в статье о теге <table>.