Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

caption-side

Свойство CSS caption-side используется для изменения положения заголовка HTML-таблицы, созданного с помощью тега <CAPTION>.

Тип свойства

Назначение: таблицы.

Применяется: к тегу <CAPTION> и элементам со свойством display: table-caption.

Наследуется: да.

Значения

Значением свойства caption-side являются ключевые слова определяющие положение заголовка относительно самой таблицы.

  • top — заголовок расположен над таблицей.
  • bottom — заголовок под таблицей.
  • left — расположение заголовка слева от таблицы.
  • right — справа от таблицы.
  • inherit — наследует значение caption-side от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: top.

Значения left и right впервые появились в CSS 2, но в CSS 2.1 их убрали. В CSS 3 они вновь появились, но пока поддерживаются далеко не всеми браузерами.

Синтаксис

caption-side: top | bottom | left | right | inherit

Пример CSS: использование caption-side

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство caption-side</title>
  <style type="text/css">
   table {
    width: 100%; /* ширина таблицы */
    text-align: center; /* содержимое ячеек по центру */
    border-collapse: collapse; /* объединяем рамки ячеек */
    border: 3px #000000 solid; /* стили рамки таблицы */
   }
   th, td {
    border: 1px #000000 solid; /* стили рамок ячеек */
   }
   caption {
    caption-side: bottom; /* заголовок под таблицей */
    text-align: right; /* текст заголовка справа */
    font-style: italic; /* курсивный шрифт */
   }
  </style>
 </head>
 <body>
  <table>
   <caption>Воздействие алкоголя на организм человека.</caption>
   <tr><th>Алк., 40°</th><th>М</th><th>Ж</th></tr>
   <tr>
    <td>0 л.</td>
    <td><img src="images/man_good.gif" alt="Хорошо"></td>
    <td><img src="images/wom_good.gif" alt="Хорошо"></td>
   </tr>
   <tr>
    <td>0,5 л.</td>
    <td><img src="images/man_bad.gif" alt="Плохо"></td>
    <td><img src="images/wom_bad.gif" alt="Плохо"></td>
   </tr>
   <tr>
    <td>1 л.</td>
    <td><img src="images/man_dead.gif" alt="Выносите"></td>
    <td><img src="images/wom_dead.gif" alt="Выносите"></td>
   </tr>
  </table>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS caption-side.

Использование свойства CSS caption-side

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетДаДаДаДаДа
CSS по алфавиту
CSS по назначению