Својство caption-side

Својство caption-side поставља положај наслова табеле, креираног помоћу тага <caption>. Својство може имати две вредности: top (изнад табеле, подразумевано) или bottom (испод табеле).

Синтакса

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

Пример

Поставимо наслов изнад табеле:

<table border="1" width="300">
	<caption>Табела</caption>
	<tr>
		<th>Хед</th>
		<th>Опис</th>
	</tr>
	<tr>
		<td>текст1</td>
		<td>текст2</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>Табела</caption>
	<tr>
		<th>Хед</th>
		<th>Опис</th>
	</tr>
	<tr>
		<td>текст1</td>
		<td>текст2</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,
који поставља распоред после првог елемента