Свойство 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. Их не рекомендуется использовать в продакшене.

Свойство 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

css

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

Ниже приведен пример, где применяется значение «top». Оно размещает подпись над таблицей.

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

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

html

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

Try it Yourself »

Результат

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

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

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

html

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

Try it Yourself »

Значения

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

Практика

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

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

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

Свойство caption-side для подписи таблицы ​

Синтаксис ​

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

Результат ​

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

Значения ​

Практика ​

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

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

Синтаксис

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

Результат

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

Значения

Практика