Propriété caption-side

La propriété caption-side définit la position de la légende d'un tableau, créée à l'aide de la balise <caption>. La propriété peut avoir deux valeurs : top (au-dessus du tableau, par défaut) ou bottom (sous le tableau).

Syntaxe

sélecteur {
	caption-side: top | bottom;
}

Exemple

Plaçons la légende au-dessus du tableau :

<table border="1" width="300">
	<caption>Tableau</caption>
	<tr>
		<th>Titre</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>texte1</td>
		<td>texte2</td>
	</tr>
</table>

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

Exemple

Maintenant, déplaçons la légende sous le tableau :

<table border="1" width="300">
	<caption>Tableau</caption>
	<tr>
		<th>Titre</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>texte1</td>
		<td>texte2</td>
	</tr>
</table>

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

Voir aussi

la propriété bottom,
qui définit la position du bord inférieur de l'élément
la propriété top,
qui définit la position du bord supérieur de l'élément
la propriété left,
qui définit la position du bord gauche de l'élément
la propriété right,
qui définit la position du bord droit de l'élément
le pseudo-élément ::backdrop,
qui définit le positionnement après le premier élément