Proprietatea caption-side

Proprietatea caption-side stabilește poziția titlului tabelului, creat cu ajutorul tag-ului <caption>. Proprietatea poate avea două valori: top (deasupra tabelului, implicit) sau bottom (sub tabel).

Sintaxă

selector {
	caption-side: top | bottom;
}

Exemplu

Să poziționăm titlul deasupra tabelului:

<table border="1" width="300">
	<caption>Tabel</caption>
	<tr>
		<th>Antet</th>
		<th>Descriere</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;
}

Exemplu

Acum să mutăm titlul sub tabel:

<table border="1" width="300">
	<caption>Tabel</caption>
	<tr>
		<th>Antet</th>
		<th>Descriere</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;
}

Veți și

proprietatea bottom,
care stabilește poziția marginii inferioare a elementului
proprietatea top,
care stabilește poziția marginii superioare a elementului
proprietatea left,
care stabilește poziția marginii stângi a elementului
proprietatea right,
care stabilește poziția marginii drepte a elementului
pseudoelementul ::backdrop,
care stabilește poziționarea după primul element