caption-side

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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.

Exemple interactif

Syntaxe

css
/* Valeurs avec un mot-clé */
/* Valeurs directionnelles */
caption-side: top;
caption-side: bottom;

/* Valeurs logiques */
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;

/* Valeur globales */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: revert-layer;
caption-side: unset;

La propriété caption-side se paramètre à l'aide d'un des mots-clés suivants.

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.

block-start

Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé au début de l'axe de bloc.

block-end

Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé à la fin de l'axe de bloc.

inline-start

Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé au début de l'axe en ligne.

inline-end

Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé à la fin de l'axe en ligne.

Définition formelle

Valeur initialetop
Applicabilitééléments qui sont des légendes de tableaux
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

caption-side = 
top |
bottom

Exemples

CSS

css
.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}

HTML

html
<table class="top">
  <caption>
    Une légende au-dessus du tableau
  </caption>
  <tr>
    <td>Des données d'un tableau</td>
    <td>Pfiou encore des données</td>
  </tr>
</table>

<br />

<table class="bottom">
  <caption>
    Une légende en dessous du tableau
  </caption>
  <tr>
    <td>Des données d'un tableau</td>
    <td>Pfiou encore des données</td>
  </tr>
</table>

Résultat

must be provided

Spécifications

Specification
Cascading Style Sheets Level 2
# propdef-caption-side
CSS Logical Properties and Values Level 1
# caption-side

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
caption-side
bottom
bottom-outside
Non-standard
left
Non-standard
right
Non-standard
top
top-outside
Non-standard
top and bottom are relative to the writing-mode value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Non-standard. Check cross-browser support before using.