CSS caption-side : positionner le titre d'un tableau (top, bottom)

À quoi sert caption-side ?

En HTML, la balise <caption> sert à donner un titre à un tableau. Par défaut, ce titre s'affiche au-dessus du tableau. Mais parfois, on préfère le placer en dessous — comme une légende sous une photo. C'est exactement ce que fait la propriété CSS caption-side : elle contrôle la position de ce titre, sans toucher au HTML.

C'est une propriété discrète, peu connue des débutants, mais utile dès qu'on travaille avec des tableaux de données ou des tableaux de comparaison.

Définition et utilisation

La propriété caption-side s'applique à l'élément <caption> d'un tableau. Elle accepte deux valeurs principales : top pour placer le titre avant le tableau, et bottom pour le placer après.

Voici la syntaxe de base. On cible l'élément caption dans la feuille de style et on lui applique la valeur souhaitée :

📋 Copier le code

caption {
  caption-side: bottom;
}

Quelques informations techniques à retenir :

Valeur par défaut : top
Héritée : oui — les éléments enfants du tableau héritent de cette valeur
Version CSS : CSS2 (supportée depuis très longtemps, aucun souci de compatibilité en 2026)
Syntaxe JavaScript : object.style.captionSide = "bottom"

Les valeurs de caption-side

La propriété accepte trois valeurs. En pratique, on utilise surtout top et bottom :

Valeur	Description
top	Le titre s'affiche au-dessus du tableau. C'est la valeur par défaut.
bottom	Le titre s'affiche en dessous du tableau, comme une légende.
inherit	La valeur est héritée de l'élément parent. À noter : Internet Explorer 8 et versions antérieures ne supportaient pas cette valeur, mais ce n'est plus un problème en 2026.

Exemple complet avec HTML et CSS

Pour voir caption-side en action, voici un tableau HTML avec sa balise <caption> et le CSS qui positionne le titre en bas. C'est le cas d'usage le plus fréquent, quand on veut imiter une légende de figure :

📋 Copier le code

/* CSS : le titre passe sous le tableau */
caption {
  caption-side: bottom;
  font-style: italic;
  color: #555;
}

/* HTML correspondant */
<table>
  <caption>Tableau 1 — Résultats du mois de janvier</caption>
  <tr>
    <th>Produit</th>
    <th>Ventes</th>
  </tr>
  <tr>
    <td>Stylo</td>
    <td>120</td>
  </tr>
</table>

Le titre "Tableau 1 — Résultats du mois de janvier" s'affichera sous le tableau, en italique et gris clair. On peut bien sûr le styliser davantage avec d'autres propriétés CSS comme font-size, text-align ou margin-top.

Conseil pratique

Si on place le titre en bas avec caption-side: bottom, il reste techniquement dans le flux HTML avant les lignes du tableau — seule la présentation visuelle change. Cela ne pose aucun problème pour l'accessibilité ni pour les lecteurs d'écran, qui lisent toujours le <caption> en premier, quelle que soit sa position visuelle.

Par carabde | Mis à jour le 17 mai 2026

Sommaire