От автора: свойство caption-side позволяет задать местоположение тега caption, используемого в HTML таблицах. Свойство применимо к любому тегу с display: caption-side.
|
1 2 3 |
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 и должны поддерживаться в браузерах, которые поддерживают нестандартные значения.
Поддержка в браузерах
Таблица сверху относится к стандартным значениям top и bottom. Firefox также поддерживает нестандартные значения top, bottom, top-outside и bottom-outside. Новые значения block-start, block-end, inline-start и inline-end не поддерживаются.
Автор: Louis Lazaris
Источник: //css-tricks.com/
Редакция: Команда webformyself.
