Таблицы

Свойство caption-side

Свойство caption-side

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


table {
    caption-side: top;
}

Значения:

  • top - подпись сверху таблицы (по умолчанию)
  • bottom - подпись снизу таблицы
  • inherit - значение наследуется от значения caption-side родительского элемента

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

Если таблица находится в режиме vertical-rl, то надпись будет выводиться слева или справа, используя те же значения top и bottom.

Браузер Firefox дополнительно поддерживает четыре других свойства: left (подпись слева от таблицы), right (подпись справа от таблицы), top-outside (подпись сверху от таблицы, размер не зависит от таблицы), bottom-outside (подпись снизу от таблицы, размер не зависит от таблицы). Другие браузеры не стали поддерживать эти значения.

В черновиках CSS прописаны новые свойства: block-start, block-end, inline-start и inline-end.

Примеры


<caption style="caption-side: top">Коты</caption>

Надпись Коты выводится сверху (top). Это значение по умолчанию.

Коты
Барсик
Мурзик
Васька

Надпись Коты выводится снизу (bottom).

Коты
Барсик
Мурзик
Васька
Реклама