<caption>: Элемент заголовка таблицы

Элемент <caption> HTML определяет заголовок (или название) таблицы, предоставляя таблице доступное описание.

Этот элемент включает глобальные атрибуты.

Следующие атрибуты устарели и не должны использоваться. Они документированы ниже для справки при обновлении существующего кода и для исторической справки.

align Устаревший

Указывает, с какой стороны таблицы должен отображаться заголовок. Возможные перечислимые значения: left, top, right, или bottom. Используйте CSS-свойства caption-side и text-align вместо этого атрибута, так как он устарел.

• Если включён, элемент <caption> должен быть первым дочерним элементом своего родительского элемента <table>.
• Когда элемент <table> вложен в элемент <figure> в качестве единственного содержимого, он должен иметь заголовок с помощью элемента <figcaption> для <figure>, а не в качестве элемента <caption> внутри <table>.
• Любой background-color, применённый к таблице, не будет применён к её заголовку. Добавьте background-color к элементу <caption> также, если вам нужен тот же цвет фона для обоих.

См. <table> для примера полной таблицы, демонстрирующего общие стандарты и рекомендации по наилучшей практике.

Этот пример демонстрирует простую таблицу, включающую заголовок, описывающий представленные данные.

Такой "заголовок" полезен для пользователей, быстро просматривающих страницу, и особенно полезен для пользователей с нарушениями зрения, позволяя им быстро определить релевантность таблицы, не заставляя экранного читателя читать содержимое множества ячеек, чтобы узнать, о чём таблица.

HTML

Элемент <caption> используется в качестве первого дочернего элемента <table>, с текстовым содержимым, подобным заголовку, для описания данных таблицы. Три строки, первая из которых — строка заголовка, с двумя столбцами, создаются с помощью элементов <tr>, <th> и <td> после элемента <caption>.

<table>
  <caption>
    User login email addresses
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@example.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@example.com</td>
  </tr>
</table>

CSS

Используется несколько базовых CSS-правил для выравнивания и выделения <caption>.

caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: bold;
}

Результат

• Учебник: HTML-таблицы
• <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Другие элементы, относящиеся к таблицам
• caption-side: CSS-свойство для позиционирования <caption> относительно его родительского элемента <table>
• text-align: CSS-свойство для горизонтального выравнивания текстового содержимого элемента <caption>