Właściwość caption-side

Właściwość caption-side określa położenie podpisu tabeli, utworzonego za pomocą znacznika <caption>. Właściwość może przyjmować dwie wartości: top (u góry tabeli, domyślnie) lub bottom (pod tabelą).

Składnia

selektor {
	caption-side: top | bottom;
}

Przykład

Umieśćmy podpis nad tabelą:

<table border="1" width="300">
	<caption>Tabela</caption>
	<tr>
		<th>Nagłówek</th>
		<th>Opis</th>
	</tr>
	<tr>
		<td>tekst1</td>
		<td>tekst2</td>
	</tr>
</table>

table {
	width: 100%;
	border-collapse: collapse;
}
td {
	width: 200px;
	height: 100px;
	text-align: center;
}
caption {
	caption-side: top;
	font-weight: bold;
}

Przykład

A teraz przenieśmy podpis pod tabelę:

<table border="1" width="300">
	<caption>Tabela</caption>
	<tr>
		<th>Nagłówek</th>
		<th>Opis</th>
	</tr>
	<tr>
		<td>tekst1</td>
		<td>tekst2</td>
	</tr>
</table>

table {
	width: 100%;
	border-collapse: collapse;
}
td {
	width: 200px;
	height: 100px;
	text-align: center;
}
caption {
	caption-side: bottom;
	font-weight: bold;
}

Zobacz też

właściwość bottom,
która ustawia pozycję dolnej krawędzi elementu
właściwość top,
która ustawia pozycję górnej krawędzi elementu
właściwość left,
która ustawia pozycję lewej krawędzi elementu
właściwość right,
która ustawia pozycję prawej krawędzi elementu
pseudoelement ::backdrop,
który ustawia położenie za pierwszym elementem