Уласцівасць 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,
які задае размяшчэнне пасля першага элемента