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	Значение элемента наследуется от родительского элемента.


1.0+	12.0+	1.0+	1.0+	4.0+

1.0+

12.0+

1.0+

4.0+

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

Синтаксис

Пример

Пример

Значения

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

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