Propriété CSS caption-side

❮ Précédent Suivant ❯

La propriété caption-side définit la place de l'élément HTML <caption>, utilisé sur les tableaux HTML. La balise <caption> est utilisée pour donner un titre au tableau. Le titre (légende) du tableau peut être placé au fond ou au sommet du tableau.

La propriété caption-side a 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 au-dessous du tableau.

Il y a quatre autres valeurs qui ne sont pas standardisées: left, right, top-outside et bottom-outside. Ces quatre valeurs ont été proposées en CSS 2, mais ne sont pas incluses dans la spécification CSS 2.1.

La propriété caption-side peut aussi s'appliquer à n'importe quel élément dont la propriété display est définie à "caption-side".

Valeur initiale	top
Appliquée à	Éléments de légende de table.
Héritée	Oui.
Animable	Distincte.
Version	CSS3
Syntaxe DOM	object.style.captionSide = "top";

Syntaxe

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

Voici un exemple, où la valeur "top" est appliquée. Cela met le légende au dessus de la boîte de légende.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété caption-side</h2>
    <p>Ici la caption-side est définie à "top":</p>
    <table class="top">
      <caption>Quelque titre ici</caption>
      <tr>
        <td>Quelque texte</td>
        <td>Quelque texte</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple, vous pouvez trouver la différence entre les deux valeurs.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété caption-side</h2>
    <p>Ici la caption-side est définie à "top":</p>
    <table class="top">
      <caption>ABOVE</caption>
      <tr>
        <td>Quelque texte</td>
        <td>Quelque texte</td>
      </tr>
    </table>
    <br>
    <p>Ici la caption-side est définie à "bottom":</p>
    <table class="bottom">
      <caption>BELOW</caption>
      <tr>
        <td>Quelque texte</td>
        <td>Quelque texte</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
top	Cela place le légende au-dessus du tableau. C'est la valeur initiale de cette propriété.
bottom	Cela place le légende au-dessous du tableau.
left	Cela place le légende sur le côté gauche du tableau.
right	Cela place le légende sur le côté droit du tableau.
top-outside	Cela place le légende au-dessus du tableau. La largeur et le comportement de l'alignement horizontal behavior ne sont pas liés à la disposition horizontale du tableau.
bottom-outside	Cela place le légende au-dessous du tableau, tandis que la largeur et le comportement de l'alignement horizontal ne sont pas liés à la disposition horizontale du tableau.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.