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
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.

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
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 8Opera Support complet 4Safari Support complet 1WebView Android Support complet OuiChrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS Support complet OuiSamsung Internet Android ?
Non-standard values left, right, top-outside, and bottom-outside
Non-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet OuiOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
top and bottom are relative to the writing-mode value
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 42IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 42Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, Sheppy, teoli, FredB, BenoitL, *.Har(d)t
Dernière mise à jour par : SphinxKnight,