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.

Valeur initialetop
Applicabilitééléments qui sont des légendes de tableaux
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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

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 Internet Explorer Opera Safari
Support simple 1.0 1.0 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
top et bottom sont relatives à la valeur de writing-mode Pas de support 42 (42) Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? ?
left, right, top-outside et bottom-outside 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

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