Свойство caption-side определяет положение HTML элемента <caption>, используемый в HTML таблицах. Тег <caption> используется для установления заголовка таблицы. Заголовок таблицы может быть расположен до или после таблицы.
Свойство caption-side имеет две стандартные значения - top и bottom. Значение "top" определяет, что заголовок должен быть расположен над таблицей. Значение "bottom" определяет, что заголовок должен находиться под таблицей.
Есть еще четыре нестандартных значений - left, right, top-outside и bottom-outside. Эти четыре значения предложены для CSS 2, но они не включены в спецификацию CSS 2.
Свойствоcaption-side может также быть применен к элементу, свойство display которого установлено на "caption-side".
Значение по умолчанию | top |
Применяется | К элементам, у которых значение display установлено как table-caption. |
Наследуется | Да |
Анимируемое | Discrete |
Версия | CSS3 |
DOM синтаксис | object.style.captionSide = "top"; |
Синтаксис
caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;
Пример, где применено значение "top":
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
caption {
background: #1c87c9;
color: #fff;
}
.top caption {
caption-side: top;
}
table, th, td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #ccc;
color: #666;
}
</style>
</head>
<body>
<h2>Пример свойства caption-side</h2>
<p>Установлено значение "top":</p>
<table class="top">
<caption>Заголовок</caption>
<tr>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
</body>
</html>
Пример, где можно увидеть разницу между двумя значениями:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
caption {
background: #ccc;
}
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table, th, td {
border: 1px solid #cccccc;
padding: 3px;
}
td {
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Пример свойства caption-side</h2>
<p>Установлено значение "top":</p>
<table class="top">
<caption>ABOVE</caption>
<tr>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
<br>
<p>Установлено значение "bottom":</p>
<table class="bottom">
<caption>BELOW</caption>
<tr>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
</body>
</html>
Значения
Значение | Описание |
---|---|
top | Заголовок расположен над таблицей. Значение по умолчанию. |
bottom | Заголовок расположен под таблицей. |
left | Заголовок расположен слева от таблицы. |
right | Заголовок расположен справа от таблицы. |
top-outside | Заголовок расположен над таблицей. Толщина и горизонтальное выравнивание не привязаны к горизонтальному макету таблицы. |
bottom-outside | Заголовок расположен под таблицей. Толщина и горизонтальное выравнивание не привязаны к горизонтальному макету таблицы. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
1.0+ | 12.0+ | 1.0+ | 1.0+ | 4.0+ |