MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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.

/* 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;

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

Syntaxe

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

Spécification État Commentaires
CSS Logical Properties 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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox Edge Internet Explorer Opera Safari
Support simple 1.0 1.0 (Oui) 8.0 4.0 1.0
left, right, top-outside and bottom-outside Pas de support (Oui) Pas de support Pas de support Pas de support Pas de support
top et bottom sont relatives à la valeur de writing-mode Pas de support 42 (42) Pas de support Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple (Oui) ? (Oui) ? ? (Oui)
left, right, top-outside et bottom-outside Pas de support ? Pas de support Pas de support Pas de support Pas de support
top et bottom sont relatives à la valeur de writing-mode Pas de support 42.0 (42) Pas de support Pas de support Pas de support Pas de support

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