<caption> HTML-элемент подписи таблицы

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

Попробуйте

<table>
  <caption>
    He-Man and Skeletor facts
  </caption>
  <tbody>
    <tr>
      <td></td>
      <th scope="col" class="heman">He-Man</th>
      <th scope="col" class="skeletor">Skeletor</th>
    </tr>
    <tr>
      <th scope="row">Role</th>
      <td>Hero</td>
      <td>Villain</td>
    </tr>
    <tr>
      <th scope="row">Weapon</th>
      <td>Power Sword</td>
      <td>Havoc Staff</td>
    </tr>
    <tr>
      <th scope="row">Dark secret</th>
      <td>Expert florist</td>
      <td>Cries at romcoms</td>
    </tr>
  </tbody>
</table>

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250 250 250);
}

tr:nth-child(odd) td {
  background-color: rgb(240 240 240);
}

.heman {
  font:
    1.4rem "molot",
    sans-serif;
  text-shadow:
    1px 1px 1px white,
    2px 2px 1px black;
}

.skeletor {
  font:
    1.7rem "rapscallion",
    fantasy;
  letter-spacing: 3px;
  text-shadow:
    1px 1px 0 white,
    0 0 9px black;
}

Атрибуты

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

Устаревшие атрибуты

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

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>. Его текст, похожий на заголовок, описывает данные таблицы. После <caption> с помощью элементов <tr>, <th> и <td> создаются три строки, первая из которых является строкой заголовков, с двумя столбцами.

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

CSS

Для выравнивания и выделения <caption> используются базовые стили CSS.

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>