Propriété CSS caption-side

La propriété caption-side définit le placement de l'élément HTML <caption> au sein d'un tableau HTML. La balise <caption> est utilisée pour donner un titre à un tableau. Le titre (légende) du tableau peut être placé en bas ou en haut du tableau.

Cette propriété possède deux valeurs standardisées : top et bottom. La valeur top définit que la boîte de légende doit être placée au-dessus du tableau. La valeur bottom définit que la boîte de légende doit être placée en dessous du tableau.

Il existe quatre autres valeurs non standardisées : left, right, top-outside et bottom-outside. Ces valeurs ont été proposées dans CSS 2 mais n'ont pas été incluses dans CSS 2.1. Elles sont actuellement obsolètes et uniquement prises en charge par Firefox. Elles ne sont pas recommandées pour une utilisation en production.

La propriété caption-side peut également s'appliquer à tout élément dont la propriété display est définie sur table-caption.

Valeur initiale	top
S'applique à	Éléments table-caption.
Héritage	Non.
Animatable	Discret.
Version	CSS 2.1
Syntaxe DOM	object.style.captionSide = "top";

Propriété caption-side pour une légende de tableau

Utilisez une légende de tableau pour définir un titre court pour le tableau, comme une brève description. Cela permettra de décrire la structure du tableau. L'élément <caption> doit être utilisé à cette fin. Il doit être placé immédiatement après la balise ouvrante <table>, ce qui en fait le premier enfant du tableau. (Remarque : l'attribut summary de la balise <table> est déprécié en HTML5 et ne doit pas être utilisé.) Grâce à la propriété caption-side, vous pouvez modifier la position de la légende.

Syntaxe

Syntaxe de la propriété CSS caption-side

caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;

Voici un exemple où la valeur top est appliquée. Elle place la légende au-dessus du tableau.

Exemple de la propriété CSS caption-side :

Exemple de la propriété CSS caption-side avec la valeur top

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #1c87c9;
        color: #fff;
      }
      .top caption {
        caption-side: top;
      }
      table,
      th,
      td {
        border: 1px solid #1c87c9;
        padding: 3px;
      }
      td {
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>Some title here</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS caption-side](/uploads/media/default/0001/03/273b1e51c9d5a4a9ee88f0aa85c7a0958ae2d787.png "CSS caption-side property with top value" =420x)

Exemple de la propriété caption-side avec deux valeurs :

Exemple de la propriété CSS caption-side avec les valeurs top et bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #ccc;
      }
      .top caption {
        caption-side: top;
      }
      .bottom caption {
        caption-side: bottom;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
        padding: 3px;
      }
      td {
        background-color: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>ABOVE</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
    <br />
    <p>And here the caption-side is set to "bottom":</p>
    <table class="bottom">
      <caption>BELOW</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

Quand utiliser caption-side

Par défaut, la légende apparaît au-dessus du tableau (caption-side: top), ce qui est l'emplacement conventionnel pour un titre de tableau. Définissez-la sur bottom lorsque la légende ressemble davantage à une note de bas de page ou à une source de données — par exemple « Figure 1 : Chiffre d'affaires trimestriel (en milliers) » placée sous un tableau de type graphique. Le choix est purement visuel ; le <caption> reste toujours le premier enfant du tableau dans le balisage, de sorte que les lecteurs d'écran l'annoncent comme le nom accessible du tableau, quelle que soit la position où il est affiché.

Points à garder à l'esprit

La position dans le balisage est fixe, le rendu visuel ne l'est pas. Même lorsque vous utilisez caption-side: bottom, le <caption> doit rester le premier enfant de <table>. CSS déplace uniquement l'endroit où la boîte est dessinée, pas l'emplacement de l'élément dans le DOM.
Restez sur top et bottom. Les valeurs left, right, top-outside et bottom-outside ont été supprimées de CSS 2.1 et ne sont honorées que dans Firefox. Dans tous les autres navigateurs, elles sont ignorées et reviennent à top, alors évitez-les en production.
Elle n'est pas héritée. Bien que la propriété s'applique aux boîtes table-caption, elle n'est pas héritée, donc la définir sur un élément englobant n'affecte pas les tableaux imbriqués à moins de cibler directement leurs légendes.
Pas de boîte de mise en page propre à redimensionner. caption-side ne peut pas modifier la largeur ou l'alignement du texte de la légende — utilisez text-align et width sur le <caption> pour cela.

Compatibilité des navigateurs

Les valeurs standardisées top et bottom sont prises en charge par tous les navigateurs modernes, y compris Internet Explorer 8 et versions ultérieures. Les valeurs non standard sont uniquement prises en charge par Firefox.

Valeurs

Valeur	Description	Essayez
top	Place la légende au-dessus du tableau. C'est la valeur par défaut de cette propriété.	Essayez »
bottom	Place la légende en dessous du tableau.	Essayez »
left	Place la légende à gauche du tableau. Une valeur non standard prise en charge uniquement par Firefox.
right	Place la légende à droite du tableau. Une valeur non standard prise en charge uniquement par Firefox.
top-outside	Place la légende au-dessus du tableau. Les comportements de largeur et d'alignement horizontal ne sont pas liés à la mise en page horizontale du tableau. Une valeur non standard prise en charge uniquement par Firefox.
bottom-outside	Place la légende en dessous du tableau, tandis que les comportements de largeur et d'alignement horizontal ne sont pas liés à la mise en page horizontale du tableau. Une valeur non standard prise en charge uniquement par Firefox.
initial	Définit la propriété à sa valeur par défaut.	Essayez »
inherit	Hérite de la propriété de son élément parent.

Pratique

Que fait la propriété 'caption-side' en CSS ?

Elle définit la position de la légende en haut du tableau.Elle définit la position de la légende en bas du tableau.Elle applique une couleur de police spécifique à la légende.Elle agrandit la taille du texte de la légende.

Propriétés de style de tableau associées

border-collapse — choisir si les bordures du tableau fusionnent en une seule ligne ou restent séparées.
empty-cells — contrôler si les bordures et les arrière-plans sont rendus sur les cellules vides.
table-layout — basculer entre les algorithmes de largeur de colonne automatique et fixe.
text-align — aligner le texte de la légende dans sa boîte.