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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui1841
Non-standard values left, right, top-outside, and bottom-outside Non Non Oui Non Non Non
top and bottom are relative to the writing-mode value Non Non42 Non Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui ? Oui4 ? Oui ?
Non-standard values left, right, top-outside, and bottom-outside Non ? Non Oui Non Non ?
top and bottom are relative to the writing-mode value Non ? Non42 Non Non ?

É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,