caption-side в CSS


caption-side

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Нет Нет Нет ? Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)2
Значение по умолчанию top
Наследуется Да
Применяется К или ко всем элементам, у которых значение display установлено ка table-caption .
Аналог ШТМЛ

Описание

Определяет положение заголовка таблицы, который задается с помощью тега , относительно самой таблицы. Параметр caption-side выводит заголовок до или после таблицы, а выравнивание контента по правому или левому краю устанавливается через атрибут text-align . Браузер Файер фох также поддерживает расположение заголовка слева или справа от таблицы, но эти значения не входят в спецификацию CSS (ЦСС).

Синтаксис

caption-side: top | bottom

Аргументы

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования caption-side

caption-s >

Свойство CSS caption-side используется для изменения положения заголовка HTML-таблицы, созданного с помощью тега .

Тип свойства

Применяется: к тегу и элементам со свойством display: table-caption.

Значения

Значением свойства caption-side являются ключевые слова определяющие положение заголовка относительно самой таблицы.

  • top — заголовок расположен над таблицей.
  • bottom — заголовок под таблицей.
  • left — расположение заголовка слева от таблицы.
  • right — справа от таблицы.
  • inherit — наследует значение caption-side от родительского элемента.


Процентная запись: не существует.

Значение по умолчанию: top.

Значения left и right впервые появились в CSS 2, но в CSS 2.1 их убрали. В CSS 3 они вновь появились, но пока поддерживаются далеко не всеми браузерами.

Синтаксис

Пример CSS: использование caption-side

Результат. Использование свойства CSS caption-side.

CSS свойство caption-s >

Это сойство определяет, где будет отображаться заголовок таблицы. В IE8 работает, только если определена декларация !DOCTYPE.

CSS синтаксис

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

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

Пример

Определим место расположения заголовка таблицы

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

Пример

Указать расположение заголовка таблицы:

caption
<
caption-side:bottom;
>

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

Определение и Использование

Свойство caption-side указывает расположение заголовка таблицы.

Значение по умолчанию: top
Наследуется: да
Версия: CSS2
JavaScript синтаксис: объект.style.captionS


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

Свойство caption-side поддерживается всеми основными браузерами.

Замечание: IE8 поддерживает свойство caption-side, только если указано объявление !DOCTYPE.

caption-s >

Easily manage projects with monday.com

The caption-side property in CSS allows you to define where to position HTML’s element, used on HTML tables. This property can also apply to any element whose display property is set to caption-side .

Values

  • top : the default. Positions the caption at the top of the table.
  • bottom : positions the caption at the bottom of the table.
  • inherit : indicates that the value is inherited from the caption-side value of its parent

The caption-side property can be applied either to the

element or the element, with the same effect. While this property will affect the position of the caption box as a whole (a caption’s display value computes to table-caption ), it will not affect the alignment of text inside the box. Text inside the box may be aligned using the text-align property.

Note that the above values for caption-side are relative to the table’s writing-mode. For example, if a table is set to a vertical writing mode, then the top and bottom values will be relative to the direction of the table.

The demo below includes a «toggle» button that toggles the table’s caption-side property between top and bottom , so you can see the difference using a table with many rows of data:

In the next demo, the writing-mode for the table is set to vertical-rl . As demonstrated by toggling using the button, the top and bottom values are relative to the table’s writing-mode:

Non-standard Firefox-only Values

Firefox has long supported, and still supports, four non-standard values for caption-side :

  • left : positions the caption to the left of the table.
  • right : positions the caption to the right of the table.
  • top-outside : positions the caption at the top of the table, with its dimensions independent of the table
  • bottom-outside : positions the caption at the bottom of the table, with its dimensions independent of the table


The demo below works only in Firefox, and allows you to use four buttons to set the different non-standard values:

New Standard Values

In the latest drafts of the CSS specification, the caption-side property is part of CSS Logical Properties Level 1 and includes the values block-start , block-end , inline-start , and inline-end . The latter two correspond to the non-standard left and right values, and are only required to be supported by user agents that support those non-standard values.

More Information

Support in the table above refers to basic support for the standard top and bottom values. Firefox also additionally supports the non-standard left , right , top-outside , and bottom-outside values. There is no browser support for the new block-start , block-end , inline-start , and inline-end values.

Caption-side в CSS

Css module of single purpose classes for caption side

186 12 12
bytes selectors declarations

Learn more about using css installed with npm:

Import the css module

Then process the css using the tachyons-cli

The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with:

The built css is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

The source css files can be found in the src directory. Running $ npm start will process the source css and place the built css in the css directory.

Свойство caption-s > Дата публикации: 2020-01-13

От автора: свойство caption-side позволяет задать местоположение тега caption, используемого в HTML таблицах. Свойство применимо к любому тегу с display: caption-side.

Значения

top: по умолчанию. Подпись сверху таблицы.

Как создать сайт самому?


Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

bottom: подпись снизу таблицы.

inherit: значение наследуется от значения caption-side родительского элемента.

Свойство caption-side можно применять как к тегу table, так и к тегу caption, эффект будет одинаковый. Свойство перемещает блок с подписью (свойство display у подписи принимает значение table-caption), но никак не влияет на выравнивание тексту внутри. Текст внутри блока можно выровнять с помощью свойства text-align.

Обратите внимание, что значения caption-side связаны с направлением таблицы. Например, если таблица вертикальная, то значения top и bottom будут привязаны к направлению таблицы.

В демо ниже есть кнопка переключения, она изменяет значение свойства caption-side с top на bottom, чтобы вы поняли разницу в том, как располагать подпись в таблице с множеством строк:

В следующем демо таблица находится в режиме vertical-rl. Как видно, при нажатии на кнопку значения top и bottom привязаны к направлению таблицы:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Нестандартные значения только для Firefox

Firefox уже давно поддерживает 4 нестандартных значения свойства caption-side:

left: подпись слева от таблицы.

right: подпись справа от таблицы.

top-outside: подпись сверху от таблицы, размер не зависит от таблицы

bottom-outside: подпись снизу от таблицы, размер не зависит от таблицы

Демо ниже работает только в Firefox. С помощью четырех кнопок можно устанавливать нестандартные значения:

Новые стандартные значения

В последних черновиках CSS спецификации свойство caption-side вошло в спецификацию CSS Logical Properties Level 1 и дополнилось значениями block-start, block-end, inline-start и inline-end. Два последних заменяют нестандартные left и right и должны поддерживаться в браузерах, которые поддерживают нестандартные значения.

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

Таблица сверху относится к стандартным значениям top и bottom. Firefox также поддерживает нестандартные значения top, bottom, top-outside и bottom-outside. Новые значения block-start, block-end, inline-start и inline-end не поддерживаются.


Автор: Louis Lazaris

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Пример

Указать расположение заголовка таблицы:

caption
<
caption-side:bottom;
>

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

Определение и Использование

Свойство caption-side указывает расположение заголовка таблицы.

Значение по умолчанию: top
Наследуется: да
Версия: CSS2
JavaScript синтаксис: объект.style.captionS

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

Свойство caption-side поддерживается всеми основными браузерами.

Замечание: IE8 поддерживает свойство caption-side, только если указано объявление !DOCTYPE.

CSS caption-s >

The CSS caption-side property is used to specify which side of a table its caption will be positioned.

Syntax

CSS2.1 uses the following syntax:

CSS3 extends the possible values:

These values are explained below.


Possible Values

The following values are valid in CSS 2.1 and CSS3:

The caption is positioned above the table box. The caption is positioned below the table box.

Logical Values

The following values have been proposed for the caption-side property in CSS3:

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

caption-side

The caption-side property specifies the position of a table’s (

) caption ( caption ) with respect to the table itself. It specifies which side of the table the caption is to be positioned at.

Using caption-side , a table caption can be positioned above or below the table. Prior to CSS 2.1, two values left and right were proposed to position a caption on the left and right sides of a table, respectively. Those values were removed from the final 2.1 specification and are a non-standard today.

Diagram of a table with a caption above it.

Trivia & Notes

A table caption is used to provide a short heading for the table—kind of like a title or a short description. It should now, however, be used to describe a table’s structure, the table summar attribute is more suitable for that. It is inserted after the opening

tag, and should always be the first child of a table. You can change its position in the table using the caption-side property.

To align caption content horizontally within the caption box, use the text-align property. Read more about the caption element in this entry on MDN.

Official Syntax

  • Syntax:
  • Initial: top
  • Applies To: ‘table-caption’ elements
  • Animatable: no
  • Notes

    Two values, left and right , were proposed for CSS 2. Both values were removed in CSS 2.1 and are now non-standard.

    Илон Маск рекомендует:  Как сохранять таблицы microsoft office в формате html
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL