HTML-тег `<caption>`

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

Когда элемент <table>, содержащий <caption>, является единственным потомком элемента <figure>, вместо <caption> необходимо использовать элемент <figcaption>.

По умолчанию заголовок таблицы выравнивается по центру над таблицей. Для выравнивания и позиционирования можно использовать свойства text-align и caption-side.

Синтаксис

Тег <caption> является парным. Содержимое записывается между открывающим (<caption>) и закрывающим (</caption>) тегами.

Пример использования HTML-тега `<caption>`:

HTML-тег <caption>

html

<!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>

Try it Yourself »

Результат

Student	1st exam	2nd exam
John Johnson	75	65
Mary Nicolson	55	80
Max Thomson	60	47

Пример использования HTML-тега `<caption>` со свойством CSS caption-side:

Пример использования HTML-тега <caption> со свойством CSS caption-side

html

<!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>

Try it Yourself »

Атрибуты

Атрибут	Значение	Описание
align	`left`, `right`, `center`, `top`, `bottom`	Выравнивает заголовок по горизонтали или вертикали. Не используется в HTML5. Вместо него используйте CSS `caption-side`.

Тег <caption> поддерживает Глобальные атрибуты и Атрибуты событий.

Для лучшей доступности убедитесь, что заголовок программно связан с таблицей, чтобы программы чтения с экрана могли правильно его озвучить. Элемент <caption> автоматически связан со своим родительским элементом <table>.

Как стилизовать HTML-тег <caption>

json

{
    "tag_name": "caption"
}

Практика

Какое из следующих утверждений об HTML-теге <caption> является верным согласно статье на w3docs.com?

Тег <caption> используется для предоставления заголовка или пояснения к данным в HTML-таблице.Тег <caption> должен быть вставлен сразу после тега <table>.Тег <caption> может быть размещен в любом месте внутри тега <table>.Тег <caption> может содержать только текст.Вы можете использовать CSS для стилизации тега <caption>.

HTML-тег <caption> ​

Синтаксис ​

Пример использования HTML-тега &lt;caption&gt;: ​

Результат ​

Пример использования HTML-тега &lt;caption&gt; со свойством CSS caption-side: ​

Атрибуты ​