CSS свойство caption-side

CSS свойства

Определение и применение

CSS свойство caption-side устанавливает расположение заголовка таблицы (над/под таблицей).

Поддержка браузерами

.
СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
caption-side1.01.04.01.08.012.0

CSS синтаксис:

caption-side:"top | bottom | initial | inherit";

JavaScript синтаксис:

object.style.captionSide = "top"

Значения свойства

ЗначениеОписание
topПомещает заголовок над таблицей. Это значение, которое установлено по умолчанию.
bottomПомещает заголовок под таблицей.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства CSS caption-side.</title>
<style> 
td, th {
border : 1px solid; /* устанавливаем сплошную границу 1px (по умолчанию - черная)  */
}
.test {
caption-side : top; /* заголовок располагается над таблицей. */
}
.test2 {
caption-side : bottom; /* заголовок располагается под таблицей. */
}
</style>
</head>
	<body>
		<table class = "test">
			<caption>Заголовок таблицы</caption>
			<tr>
				<th>Наименование</th><th>Цена</th>
			</tr>
			<tr>
				<td>Веревка</td><td>20 рублей</td>
			</tr>
			<tr>
				<td>Мыло жидкое</td><td>45 рублей</td>
			</tr>
		</table>
		<table class = "test2">
			<caption>Заголовок таблицы</caption>
			<tr>
				<th>Наименование</th><th>Цена</th>
			</tr>
			<tr>
				<td>Веревка</td><td>20 рублей</td>
			</tr>
			<tr>
				<td>Мыло жидкое</td><td>45 рублей</td>
			</tr>
		</table>
	</body>
</html>
Пример использования свойства CSS caption-side (заголовок таблицы).
Пример использования свойства CSS caption-side (заголовок таблицы).
CSS свойства