caption-side

La propriété caption-side permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément <caption> du tableau).

Les valeurs sont relatives au mode d'écriture du tableau, indiqué par le tableau writing-mode.

Syntaxe

/* Valeurs avec un mot-clé */ 
/* Valeurs directionnelles */
caption-side: top; 
caption-side: bottom; 

/* Valeurs non-standards */ 
caption-side: left; 
caption-side: right; 
caption-side: top-outside; 
caption-side: bottom-outside; 


/* Valeur globales */ 
caption-side: inherit; 
caption-side: initial; 
caption-side: unset;

Valeurs

top

Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.

bottom

Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau.

left

Un mot-clé qui indique que la boîte de la légende doit être positionnée à gauche du tableau.

Note : Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.

right

Un mot-clé qui indique que la boîte de la légende doit être positionnée à droite du tableau.

Note : Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.

top-outside

Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.

Note : La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur top, réintroduit avec cette valeur dans une future spécification.

bottom-outside

Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.

Note : La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur bottom, réintroduit avec cette valeur dans une future spécification.

inherit

Un mot-clé qui indique que la valeur caption-side de l'élément parent doit être utilisée.

Syntaxe formelle

top | bottom | block-start | block-end | inline-start | inline-end

Exemples

CSS

caption {
  caption-side: bottom;
}

HTML

<table>
  <caption>Une légende</caption>
  <tr>
    <td>Des données d'un tableau</td>
    <td>Pfiou encore des données</td>
  </tr>
</table>

Résultat

Spécifications

Compatibilité des navigateurs