Proprietà caption-side

La proprietà caption-side imposta la posizione della didascalia della tabella, creata utilizzando il tag <caption>. La proprietà può avere due valori: top (in alto rispetto alla tabella, predefinito) o bottom (sotto la tabella).

Sintassi

selettore {
	caption-side: top | bottom;
}

Esempio

Posizioniamo la didascalia sopra la tabella:

<table border="1" width="300">
	<caption>Tabella</caption>
	<tr>
		<th>Intestazione</th>
		<th>Descrizione</th>
	</tr>
	<tr>
		<td>testo1</td>
		<td>testo2</td>
	</tr>
</table>

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

Esempio

Ora spostiamo la didascalia sotto la tabella:

<table border="1" width="300">
	<caption>Tabella</caption>
	<tr>
		<th>Intestazione</th>
		<th>Descrizione</th>
	</tr>
	<tr>
		<td>testo1</td>
		<td>testo2</td>
	</tr>
</table>

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

Vedi anche

la proprietà bottom,
che imposta la posizione del bordo inferiore di un elemento
la proprietà top,
che imposta la posizione del bordo superiore di un elemento
la proprietà left,
che imposta la posizione del bordo sinistro di un elemento
la proprietà right,
che imposta la posizione del bordo destro di un elemento
lo pseudoelemento ::backdrop,
che imposta il posizionamento dopo il primo elemento