Свойство 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,
който задава позиционирането след първия елемент