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

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

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

Есть еще четыре нестандартных значений - left, right, top-outside и bottom-outside. Эти четыре значения предложены для CSS 2, но они не включены в спецификацию CSS 2.

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

Значение по умолчанию top
Применяется К элементам, у которых значение display установлено как table-caption.
Наследуется Да
Анимируемое Discrete
Версия CSS3
DOM синтаксис object.style.captionSide = "top";

Синтаксис

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

Пример, где применено значение "top":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Установлено значение "top":</p>
    <table class="top">
      <caption>Заголовок</caption>
      <tr>
        <td>Текст</td>
        <td>Текст</td>
      </tr>
    </table>
  </body>
</html>

Пример, где можно увидеть разницу между двумя значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Установлено значение "top":</p>
    <table class="top">
      <caption>ABOVE</caption>
      <tr>
        <td>Текст</td>
        <td>Текст</td>
      </tr>
    </table>
    <br>
    <p>Установлено значение "bottom":</p>
    <table class="bottom">
      <caption>BELOW</caption>
      <tr>
        <td>Текст</td>
        <td>Текст</td>
      </tr>
    </table>
  </body>
</html>

Значения

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

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

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 4.0+

Практикуйте свои знания

What does the CSS property 'caption-side' do?
Считаете ли это полезным?