Свойство caption-side

Свойство caption-side

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

 

table {
  caption-side: top;
}

Значения

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 и должны поддерживаться в браузерах, которые поддерживают нестандартные значения.

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

Свойство caption-side

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

Автор: Louis Lazaris

Источник: https://css-tricks.com/

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree