Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

caption-side - Propriété CSS

caption-side

Résumé des caractéristiques de la propriété caption-side

Description rapide
Positionne le titre d'un tableau.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
top | bottom
Pourcentages
Ne s'appliquent pas.
Valeur initiale
top
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété caption-side passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Tableaux
Références (W3C)
Statut du document:: WD (document de travail)

Description de 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 du mode d'écriture.

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.

Syntaxes 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 à right et left mais prenant en compte le sens d'écriture (de gauche à droite ou de droite à gauche).

    Dans la mesure où les valeurs right et left sont peu reconnues, ces deux valeurs sont également peu prise en charge par les navigateurs.

  • caption-side: initial; caption-side: inherit; caption-side: revert; caption-side: revert-layer; caption-side: unset;

    La valeur initiale est : top.

Animation de caption-side.

L'animation de caption-side est possible mais présente, à notre avis, peu d'intérêt.

Titre du tableau
   
   

Manipulation de la propriété caption-side par programme.

Le petit tableau ci-dessous servira de démonstration pour les exemples de code donnés après.

Titre du tableau
ABC
DEF

Modifier la valeur de caption-side en Javascript.

Deux syntaxes sont possibles en Javascript pour modifier la valeur d'une propriété :

  • Avec le nom de la propriété écrit dans la notation kebab-case, typique de css (un tiret pour séparer les mots).
  • Ou bien le nom de la propriété écrit en notation camel-case (une lettre majuscule pour séparer les mots).

function setCaptionSide(el) {
el.style['caption-side']='bottom';
// ou
el.style.captionSide='bottom';
}

Lire en Javascript la valeur de caption-side.

Ce deuxième code explore l'attribut style du HTML. Pour qu'il retrouve la valeur d'une propriété, cette dernière doit avoir été définie dans cet attribut style, et non via un sélecteur CSS.


function getCaptionSide(el) {
alert(el.style['caption-side']);
// ou
alert(el.style.captionSide);
}

Lire la valeur calculée de caption-side en Javascript.

La valeur calculée résulte soit d'une valeur affectée à la propriété directement sur l'élément (via l'attribut style ou via un sélecteur CSS), soit d'une valeur héritée suivant le mécanisme d'héritage habituel, ou encore il peut s'agir de la valeur initiale de la propriété.


function getCalcCaptionSide(el) {
alert(window.getComputedStyle(el).getPropertyValue('caption-side'));
}

Modifier la valeur de la propriété caption-side avec JQuery.


function setCaptionSide(el) {
$(el).css('caption-side','top');
// ou
$(el).css('captionSide','top');
}

Lire la valeur calculée de la propriété caption-side avec JQuery.


function getCalcCaptionSide(el) {
alert($(el).css('caption-side'));
// ou
alert($(el).css('captionSide'));
}

Exemple interactif.


caption-side :

text-align :

writing-mode :

 

Titre du tableau
JanvierFévrierMarsAvril
MaiJuinJuilletAoût
SeptembreOctobreNovembreDécembre

Prise en charge de caption-side par les navigateurs.

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 :

Colonne 1
Support de la syntaxe générale de la propriété CSS caption-side.
Colonne 2
Support des valeurs logiques, qui prennent en compte le sens et la direction d'écriture en fonction de la langue.
Colonne 3
Support des valeurs non standard pour la propriété caption-side.
1
caption-side
2
caption-side
(Logical)
3
Non standard
values
Estimation de la prise en charge en pourcentage du parc actuel.
95%
3%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que caption-side.

Les spécifications CSS éditées par le W3C sont organisées en modules. caption-side fait partie du Module CSS - Tableaux (CSS Table Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Mode d'encadrement des cellules de tableau.
Espacement entre les cellules adjacentes dans un tableau.
Mode d'affichage des cellules vides.
Mode de calcul des largeurs de colonnes et de tableaux.