Vlastnost caption-side

Vlastnost caption-side nastavuje pozici nadpisu tabulky vytvořeného pomocí tagu <caption>. Vlastnost může mít dvě hodnoty: top (nahoře nad tabulkou, výchozí) nebo bottom (pod tabulkou).

Syntaxe

selektor {
	caption-side: top | bottom;
}

Příklad

Umístěme nadpis nad tabulku:

<table border="1" width="300">
	<caption>Tabulka</caption>
	<tr>
		<th>Hlavička</th>
		<th>Popis</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;
}

Příklad

A nyní přesuňme nadpis pod tabulku:

<table border="1" width="300">
	<caption>Tabulka</caption>
	<tr>
		<th>Hlavička</th>
		<th>Popis</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;
}

Viz také

vlastnost bottom,
která nastavuje pozici spodního okraje elementu
vlastnost top,
která nastavuje pozici horního okraje elementu
vlastnost left,
která nastavuje pozici levého okraje elementu
vlastnost right,
která nastavuje pozici pravého okraje elementu
pseudoelement ::backdrop,
který nastavuje umístění za prvním elementem