HTML тег `<caption>`

Значение и применение

Наименование таблицы, если оно требуется размещается внутри элемента <caption>...</caption> (необязательный элемент). Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом <table>.

Таблицы помогают нам систематизировать определённые данные в строки и столбцы. Они могут содержать в себе различную информацию, например, такую как текст, изображения, нумерованные и маркированные списки и т.п.

Чтобы понять, как составить таблицу, давайте рассмотрим ее простейший вариант:

Основное содержимое таблицы заключается в тег <table>..</table>.

Каждая строка таблицы помещается в элемент <tr>...</tr>.

Ячейка заголовка таблицы помещается в элемент <th>...</th> (при этом содержимое отображается жирным начертанием и выравнивается по центру).

Каждая ячейка данных таблицы помещается в элемент <td>...</td>.

По умолчанию, наименование таблицы размещается по центру вверху таблицы (расположение заголовка таблицы возможно изменить, используя CSS свойство caption-side).

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.caption
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`caption`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2
`align`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`align`	`left right top bottom`	Не поддерживается в HTML5. Определяет выравнивание заголовка.

Примеры, попробуйте сами

Структура таблицы

Измените caption и сравните заголовки, основную часть и итог таблицы.

base.css

CSS

/* Границы помогают увидеть ячейки и их объединение. */
table {
    border-collapse: collapse;
}
th,
td {
    border: 1px solid;
    padding: 4px;
}

index.html

HTML

<table>
  <caption>
    Заказ
  </caption>
  <thead>
    <tr>
      <th scope="col">Товар</th>
      <th scope="col">Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Блокнот</th>
      <td>2</td>
    </tr>
    <tr>
      <th scope="row">Карандаш</th>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Всего</th>
      <td>5</td>
    </tr>
  </tfoot>
</table>

Отличия HTML 4.01 от HTML 5

Атрибут align был удален из HTML 5.

Значение CSS по умолчанию

CSS

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

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <caption>