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

caption-side у CSS дозволяє встановити позицію заголовку(який ми записуємо між тегами <caption>) використовуваний у HTML-таблиці відносно неї самої. Також цю властивість можна застосувати до будь-якого іншого елементу сторінки, у яких значення display встановлене як table-caption.

Властивість приймає значення top(типовий), bottom та inherit(наслідує значення).

table {
	caption-side: top; /* top | bottom | left | right | inherit */
}
Демо

Текст у самому заголовку можна вирівняти по краях за допомогою text-align.

Також треба згадати, що якщо ми за через writing-mode змінимо напрямок таблиці, то і значення top/bottom будуть відносні до цього напрямку.

Демо

Firefox підтримує ще декілька значень, але вони працюють тільки у цьому браузері і не входять до специфікації CSS.

  • left розташовує заголовок ліворуч
  • right розташовує заголовок праворуч
  • top-outside схожий на top, з тим винятком, що виносить caption за границі таблиці
  • bottom-outside схожий на bottom, з тим винятком, що виносить caption за границі таблиці

В останніх оновленнях специфікації CSS з\'явилися такі значення як block-start, block-end, inline-start, і inline-end. Останні два аналогічні значенням left і right від браузера Firefox, але як і перші два вони тільки мають бути підтримувані у найновіших браузерах у майбутньому.

Підтримка
Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 4+ 8+ 2.1+ 3.2+

У таблиці показується підтримка браузерами стандартних значень top, inherit і bottom. Firefox додатково підтримує left, right, top-outside і bottom-outside. І жодний браузер ще не підтримує нові block-start, block-end, inline-start, і inline-end.