caption-side

Internet Explorer			Chrome			Opera			Safari			Firefox
6.0	7.0	8.0	2.0	3.0	4.0	9.2	9.6	10	2.0	3.1	4.0	2.0	3.0	3.6

Краткая информация

Значение по умолчанию	top
Наследуется	Да
Применяется	К <CAPTION> или ко всем элементам, у которых значение display установлено ка table-caption.
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Определяет положение заголовка таблицы, который задается с помощью тега <CAPTION>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align. Браузер Firefox также поддерживает расположение заголовка слева или справа от таблицы, но эти значения не входят в спецификацию CSS.

Синтаксис

caption-side: top | bottom

Значения

top: Располагает заголовок по верхнему краю таблицы.
bottom: Заголовок располагается под таблицей.
right: Заголовок размещается справа от таблицы. Корректно для CSS 3. Это значение работает только в браузерах Firefox.
left: Заголовок размещается слева от таблицы. Корректно для CSS 3. Это значение работает только в браузерах Firefox.

Пример

HTML 4.01CSS 2.1CSS 3IE 6IE 7IE 8Op 9.6Op 10Sa 3.1Sa 4Cr 3Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>caption-side</title>
  <style type="text/css">
    table {
     width: 350px; /* Ширина таблицы */ 
     border-collapse: collapse; /* Убираем двойную рамку между ячейками */ 
    }
    td {
     border: 1px solid green; /* Параметры границы */ 
     padding: 5px; /* Поля в ячейке */ 
    }
    caption { 
     caption-side: bottom; /* Заголовок под таблицей */ 
    }
   </style>
  </head>
  <body>
   <table>
    <caption>Расклад карт</caption>
    <tr>
     <td>&nbsp;</td>
     <td>&spades;</td>
     <td>&clubs;</td>
     <td>&hearts;</td>
     <td>&diams;</td>
    </tr>
    <tr>
     <td>Чебурашка</td>
     <td>6</td><td>3</td>
     <td>1</td><td>3</td>
    </tr>
    <tr>
     <td>Крокодил Гена </td>
     <td>1</td><td>5</td>
     <td>5</td><td>2</td>
    </tr>
    <tr>
     <td>Шапокляк</td>
     <td>3</td>
     <td>4</td>
     <td>6</td>
     <td>0</td>
    </tr>
    <tr>
     <td>Крыса Лариса </td>
     <td>3</td>
     <td>1</td>
     <td>1</td>
     <td>8</td>
    </tr>
   </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Результат использования caption-side

Объектная модель

[window.]document.getElementById("elementID").style.captionSide