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.Single : valeur unique (l'ordre n'intervient pas).Schéma de la syntaxe de caption-side.
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.
topbottomValeurs 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).Titre du tableau A B C A B C A B C - 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).Titre du tableau A B C A B C A B C - caption-side: initial; (
top) caption-side: inherit; caption-side: revert; caption-side: revert-layer; caption-side: revert-rule; caption-side: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,revert-rule,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.
Changer la position du titre des tableaux 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';
Lire la position du titre des tableaux 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 avec Javascript.
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');
Lire ou changer la position des titres avec JQuery.
// Lire la valeur :
$('#id').prop('caption-side');
// Écrire la valeur :
$('#id').prop('caption-side', 'bottom');
$('#id').prop('{caption-side': '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 concernant les valeurs logiques 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
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
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
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernantcaption-sideDé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
Ce module de spécification définit un système de mise en page basé sur un tableau, optimisé pour le rendu des données tabulaires. Dans ce modèle de disposition, chaque cellule est attribué à une intersection entre un ensemble de lignes consécutives et un ensemble de colonnes consécutives, eux-mêmes générés à partir de la structure de la table et dimensionnés en fonction de leur contenu.
Concernantcaption-sidePas 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.