caption-side

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Нет Нет Нет Да Да Да Да Да Да Да Да Да Да

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

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

Описание

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

Синтаксис

caption-side: top | bottom

Аргументы

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

Пример

Валидный HTML
Валидный CSS

<!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=windows-1251">
<title>Расположение заголовка</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