Властивість caption-side

35

Від автора: властивість 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 не підтримуються.