Vlastnosť caption-side

Vlastnosť caption-side nastavuje polohu titulku tabuľky, vytvoreného pomocou značky <caption>. Vlastnosť môže mať dve hodnoty: top (nad tabuľkou, predvolene) alebo bottom (pod tabuľkou).

Syntax

selektor {
	caption-side: top | bottom;
}

Príklad

Umiestnime titulok nad tabuľku:

<table border="1" width="300">
	<caption>Tabuľka</caption>
	<tr>
		<th>Hlava</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;
}

Príklad

A teraz presuňme titulok pod tabuľku:

<table border="1" width="300">
	<caption>Tabuľka</caption>
	<tr>
		<th>Hlava</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;
}

Pozrite tiež

vlastnosť bottom,
ktorá nastavuje pozíciu spodného okraja prvku
vlastnosť top,
ktorá nastavuje pozíciu horného okraja prvku
vlastnosť left,
ktorá nastavuje pozíciu ľavého okraja prvku
vlastnosť right,
ktorá nastavuje pozíciu pravého okraja prvku
pseudoprvok ::backdrop,
ktorý nastavuje umiestnenie za prvým prvkom