Eigenschaft caption-side

Die Eigenschaft caption-side legt die Position der Tabellenüberschrift fest, die mit dem Tag <caption> erstellt wurde. Die Eigenschaft kann zwei Werte haben: top (oben über der Tabelle, Standard) oder bottom (unter der Tabelle).

Syntax

Selektor {
	caption-side: top | bottom;
}

Beispiel

Lassen Sie uns die Überschrift über der Tabelle platzieren:

<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;
}

Beispiel

Und jetzt lassen Sie uns die Überschrift unter die Tabelle verschieben:

<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;
}

Siehe auch

die Eigenschaft bottom,
die die Position des unteren Rands eines Elements festlegt
die Eigenschaft top,
die die Position des oberen Rands eines Elements festlegt
die Eigenschaft left,
die die Position des linken Rands eines Elements festlegt
die Eigenschaft right,
die die Position des rechten Rands eines Elements festlegt
das Pseudoelement ::backdrop,
das die Positionierung nach dem ersten Element festlegt