Propriété caption-side

La propriété caption-side définit la position de la légende d'un tableau, créée à l'aide de la balise <caption>. La propriété peut avoir deux valeurs : top (au-dessus du tableau, par défaut) ou bottom (sous le tableau).

Syntaxe

csssélecteur {
  caption-side: top | bottom;
}

Exemple

Plaçons la légende au-dessus du tableau :

html<table border="1" width="300">
  <caption>Tableau</caption>
  <tr>
    <th>Titre</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>texte1</td>
    <td>texte2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: top;
  font-weight: bold;
}

Результат:

Exemple

Maintenant, déplaçons la légende sous le tableau :

html<table border="1" width="300">
  <caption>Tableau</caption>
  <tr>
    <th>Titre</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>texte1</td>
    <td>texte2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: bottom;
  font-weight: bold;
}

Результат:

Voir aussi