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 (cf. writing-mode) du tableau.

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 Cette API n'a pas été standardisée.
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 Cette API n'a pas été standardisée.
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 Cette API n'a pas été standardisée.
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 Cette API n'a pas été standardisée.
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.

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

Spécification État Commentaires
CSS Logical Properties and Values Level 1
La définition de 'caption-side' dans cette spécification.
Brouillon de l'éditeur Les valeurs top et bottom sont désormais définies comme relatives à la valeur de writing-mode.
CSS Level 2 (Revision 1)
La définition de 'caption-side' dans cette spécification.
Recommendation Définition initiale.

Valeur initialetop
Applicabilitééléments qui sont des légendes de tableaux
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser