Свойство caption-side

Свойство caption-side задает положение заголовка таблицы, созданного с помощью тега <caption>. У свойства может быть два значения: top (вверху таблицы, по умолчанию) или bottom (под таблицей).

Синтаксис

селектор {
	caption-side: top | bottom;
}

Пример

Давайте разместим заголовок над таблицей:

<table border="1" width="300">
	<caption>Table</caption>
	<tr>
		<th>Head</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>text1</td>
		<td>text2</td>
	</tr>
</table>

table {
	width: 100%;
	border-collapse: collapse;
}
td {
	width: 200px;
	height: 100px;
	text-align: center;
}
caption {
	caption-side: top;
	font-weight: bold;
}

Пример

А теперь давайте переместим заголовок под таблицу:

<table border="1" width="300">
	<caption>Table</caption>
	<tr>
		<th>Head</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>text1</td>
		<td>text2</td>
	</tr>
</table>

table {
	width: 100%;
	border-collapse: collapse;
}
td {
	width: 200px;
	height: 100px;
	text-align: center;
}
caption {
	caption-side: bottom;
	font-weight: bold;
}

Смотрите также

свойство bottom,
которое задает позицию нижнего края элемента
свойство top,
которое задает позицию верхнего края элемента
свойство left,
которое задает позицию левого края элемента
свойство right,
которое задает позицию правого края элемента
псевдоэлемент ::backdrop,
который задает расположение после первого элемента