CSS-свойство caption-side

Свойство caption-side определяет расположение HTML-элемента <caption> внутри HTML-таблицы. Тег <caption> используется для добавления заголовка к таблице. Заголовок таблицы можно разместить внизу или вверху таблицы.

Это свойство имеет два стандартизированных значения: top и bottom. Значение top означает, что блок заголовка должен располагаться над таблицей. Значение bottom означает, что блок заголовка должен располагаться под таблицей.

Существуют четыре нестандартных значения: left, right, top-outside и bottom-outside. Эти значения были предложены в CSS 2, но не вошли в CSS 2.1. В настоящее время они устарели и поддерживаются только в Firefox. Использовать их в production не рекомендуется.

Свойство caption-side также применяется к любому элементу, у которого свойство display установлено в table-caption.

Начальное значение	top
Применяется к	Элементам table-caption.
Наследуется	Нет.
Анимируется	Дискретно.
Версия	CSS 2.1
DOM-синтаксис	object.style.captionSide = "top";

Свойство caption-side для заголовка таблицы

Используйте заголовок таблицы для короткого описания её структуры. Для этой цели применяется элемент <caption>. Он должен располагаться сразу после открывающего тега <table>, являясь первым дочерним элементом таблицы. (Примечание: атрибут summary тега <table> является устаревшим в HTML5 и не должен использоваться.) С помощью свойства caption-side можно изменить положение заголовка.

Синтаксис

Синтаксис CSS-свойства caption-side

caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;

Вот пример, в котором применяется значение "top". Оно помещает заголовок над таблицей.

Пример CSS-свойства caption-side:

Пример CSS-свойства caption-side со значением top

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #1c87c9;
        color: #fff;
      }
      .top caption {
        caption-side: top;
      }
      table,
      th,
      td {
        border: 1px solid #1c87c9;
        padding: 3px;
      }
      td {
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>Some title here</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

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

Результат

![CSS-свойство caption-side](/uploads/media/default/0001/03/273b1e51c9d5a4a9ee88f0aa85c7a0958ae2d787.png "CSS caption-side property with top value" =420x)

Пример свойства caption-side с двумя значениями:

Пример CSS-свойства caption-side со значениями top и bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #ccc;
      }
      .top caption {
        caption-side: top;
      }
      .bottom caption {
        caption-side: bottom;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
        padding: 3px;
      }
      td {
        background-color: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>ABOVE</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
    <br />
    <p>And here the caption-side is set to "bottom":</p>
    <table class="bottom">
      <caption>BELOW</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

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

Когда использовать caption-side

По умолчанию заголовок отображается над таблицей (caption-side: top), что является стандартным местом для заголовка таблицы. Установите значение bottom, когда заголовок читается скорее как сноска или источник данных — например, «Рисунок 1: Квартальная выручка (в тысячах)», размещённый под таблицей-диаграммой. Выбор является исключительно визуальным: <caption> в разметке всегда остаётся первым дочерним элементом таблицы, поэтому программы чтения с экрана объявляют его как доступное имя таблицы независимо от места отрисовки.

Важные замечания

Положение в разметке фиксировано, отрисовка — нет. Даже при использовании caption-side: bottom элемент <caption> должен оставаться первым дочерним элементом <table>. CSS перемещает только место отрисовки блока, но не место элемента в DOM.
Используйте только top и bottom. Значения left, right, top-outside и bottom-outside были исключены из CSS 2.1 и поддерживаются только в Firefox. Во всех остальных браузерах они игнорируются и используется top по умолчанию, поэтому не применяйте их в production.
Свойство не наследуется. Хотя свойство применяется к блокам table-caption, оно не наследуется, поэтому установка его на обёртке не затрагивает вложенные таблицы, если не обращаться к их заголовкам напрямую.
Нет собственного блока для задания размеров. caption-side не может изменить ширину заголовка или выравнивание текста — используйте text-align и width для элемента <caption>.

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

Стандартизированные значения top и bottom поддерживаются во всех современных браузерах, включая Internet Explorer 8 и более поздние версии. Нестандартные значения поддерживаются только в Firefox.

Значения

Значение	Описание	Пример
top	Помещает заголовок над таблицей. Это значение по умолчанию.	Пример »
bottom	Помещает заголовок под таблицей.	Пример »
left	Помещает заголовок слева от таблицы. Нестандартное значение, поддерживается только в Firefox.
right	Помещает заголовок справа от таблицы. Нестандартное значение, поддерживается только в Firefox.
top-outside	Помещает заголовок над таблицей. Ширина и поведение горизонтального выравнивания не привязаны к горизонтальной разметке таблицы. Нестандартное значение, поддерживается только в Firefox.
bottom-outside	Помещает заголовок под таблицей, при этом ширина и поведение горизонтального выравнивания не привязаны к горизонтальной разметке таблицы. Нестандартное значение, поддерживается только в Firefox.
initial	Устанавливает свойство в значение по умолчанию.	Пример »
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство 'caption-side' в CSS?

Устанавливает положение заголовка вверху таблицы.Устанавливает положение заголовка внизу таблицы.Задаёт цвет шрифта заголовка.Увеличивает размер текста заголовка.

Связанные свойства оформления таблиц

border-collapse — выбор между слиянием границ таблицы в одну линию или их разделением.
empty-cells — управление отображением границ и фонов в пустых ячейках.
table-layout — переключение между автоматическим и фиксированным алгоритмами ширины столбцов.
text-align — выравнивание текста заголовка внутри его блока.