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

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

Характеристики

Значение по умолчанию: top.
Применяется: к элементу <caption>, а также ко всем элементам, у которых значение display установлено в table-caption.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.captionSide="value".

Синтаксис

caption-side: top | bottom

Значения

top – заголовок располагается над таблицей.
bottom – заголовок располагается под таблицей.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-logical/#caption-side

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/caption-side

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		table{
		width: 50%;
		margin-top: 3em;
		border: 1px solid green;
		border-collapse: collapse;
		}
		
		td{
		border: 1px solid green;
		}

		.caption_top{
		caption-side: top;
		}
		
		.caption_bottom{
		caption-side: bottom;
		}
		
	</style>
	
</head>
<body>
	
	<table class="caption_top">
		
		<caption>Таблица с верхним заголовком</caption>
		
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
		
	</table>	
	
	
	<table class="caption_bottom">
		
		<caption>Таблица с нижним заголовком</caption>
		
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
		
	</table>
		
</body>
</html>

Пример №1