Caption-side - Propriété CSS
Résumé des caractéristiques de la propriété caption-side
top | bottomtopcaption-side passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de caption-side.
caption-side.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description de la propriété caption-side.
caption-side définit la position du titre d'un tableau.
Ce titre doit être une balise caption incluse dans la balise table, avant la balise tbody.
Exemple de code HTML d'un tableau comportant la balise caption.
table
captionTitre du tableau/caption
tbody
tr
td.../td
...
/tr
/tbody
/table
Remarque : cette propriété peut être appliquée à la balise caption ou à la balise table.
La propriété text-align peut être utilisée conjointement avec caption-side pour compléter le positionnement du titre du tableau.
Prise en charge de la langue.
Les valeurs top et bottom sont en fait des valeurs logiques qui prennent en compte la direction d'écriture.
Le titre du tableau peut donc se retrouver à droite ou à gauche si la direction d'écriture est verticale :
valeurs vertical-lr ou vertical-rl affectées à la propriété writing-mode.
Le simulateur ci-dessous permet de visualiser ce mécanisme.
Valeurs pour caption-side.
- caption-side: top;
Valeur par défaut. Le titre est positionné au début du tableau. Cette valeur est donc traitée comme s'il s'agissait de
block-start. Si le mode d'écriture est le mode européen, le titre sera positionné au dessus du tableau mais ce ne sera pas forcément le cas dans d'autres modes d'écriture (voir la propriétéwriting-mode). - caption-side: bottom;
Le titre est positionné à la fin du tableau (valeur traitée comme
block-end). En mode d'écriture européen, le titre est positionné en dessous du tableau mais dans d'autres modes d'écriture le titre peut être placé à un autre emplacement (voir la propriétéwriting-mode). - caption-side: left; ⚠
Le titre est positionné à gauche du tableau. Attention ! Cette valeur est très peu reconnue par les navigateurs.
- caption-side: right; ⚠
Le titre est positionné à droite du tableau. Attention ! Cette valeur est très peu reconnue par les navigateurs.
- caption-side: top-outside; ⚠ caption-side: bottom-outside; ⚠
Ces deux valeurs sont proposées par l'inspecteur de Firefox, mais même ce navigateur ne les traite pas ou plud. Leur rôle est de positionner le titre au dessus ou en dessous du tableau, tout en conservant un positionnement horizontal indépendant de celui du tableau. Par exemple si le tableau a une largeur inférieure à la largeur disponible, le titre peut lui s'étendre sur toute la largeur disponible.
- caption-side: inline-start; ⚠ caption-side: inline-end; ⚠
Valeurs équivalentes à
rightetleftmais prenant en compte le sens d'écriture (de gauche à droite ou de droite à gauche).Dans la mesure où les valeurs
rightetleftsont peu reconnues, ces deux valeurs sont également peu prise en charge par les navigateurs. - caption-side: initial; (
top) caption-side: inherit; caption-side: revert; caption-side: revertLayer; caption-side: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de caption-side.
L'animation de caption-side est possible mais présente, à notre avis, peu d'intérêt.
Accéder à la propriété caption-side par programme.
Changement de la valeur de caption-side avec Javascript.
En Javascript, voici comment modifier la valeur de caption-side.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camelCase (une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['caption-side'] = 'bottom';
// ou
let el = document.getElementById('id');
el.style.captionSide = 'bottom';
Récupération de la valeur de caption-side avec Javascript.
La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et non pas en passant par un sélecteur CSS.
Le fonctionnement sera correct également si la propriété a été définie par le code ci-dessus.
let el = document.getElementById('id');
let value = el.style['caption-side'];
// ou
let el = document.getElementById('id');
let value = el.style.captionSide;
Récupération de la valeur calculée de caption-side.
La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. Par défaut c'est la valeur initiale. La valeur calculée est toujours définie.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('caption-side');
Changement de la valeur de caption-side avec JQuery.
$('#id').css('caption-side', 'bottom');
// ou
$('#id').css('captionSide', 'bottom');
Récupération de la valeur calculée de caption-side avec JQuery.
let value = $('#id').css('caption-side');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété caption-side et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Si l'affichage de la valeur appliquée est vide, c'est que la valeur que vous avez saisie est incorrecte.
Exemple interactif avec la propriété caption-side.
| Janvier | Février | Mars | Avril |
| Mai | Juin | Juillet | Août |
| Septembre | Octobre | Novembre | Décembre |
Compatibilité des navigateurs avec caption-side.
Le tableau ci-dessous montre que la propriété caption-side est bien reconnue par les navigateurs.
Cependant certains points de la spécification ne sont pas correctement traités.
caption-side pour définir l'emplacement du titre d'un tableau.top and bottom traitées comme des valeurs relatives au mode d'écriture.caption-sidecaption-side(valeurs logiques)
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Histoire de la propriété caption-side.
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Définition initiale de la propriétécaption-side.
04 Novembre 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
Module CSS - Tableaux - Niveau 3
Pas de changement concernantcaption-side.25 Octobre 2016Document de travail.
Voir aussi, au sujet des tableaux.
La spécification du W3C "Module CSS - Tableaux" regroupe toutes les définitions concernant spécifiquement la mise en forme des tableaux. Il y en finalement assez peu, mais de nombreuses propriétés plus générales peuvent s'appliquer aux tableaux : dimensions, marges, etc.