Comment définir la position du titre du tableau (balise de légende) en CSS

Nous pouvons spécifier la position du titre du tableau (

Dans un tableau, la balise de légende est utilisée pour fournir un titre court pour le tableau, comme un titre ou une courte description. La balise caption est insérée après la balise d'ouverture

On peut utiliser l'attribut caption-side pour positionner le titre du tableau au dessus ou en dessous du tableau, en précisant que le titre est situé au dessus ou en dessous du tableau.

Remarque :

1. Avant CSS 2.1, deux valeurs étaient fournies : "left" et "right" pour positionner le titre à gauche et à droite de le tableau respectivement à droite. Cependant, ces deux valeurs ont été supprimées dans la spécification finale 2.1, et sont désormais non standards et peu compatibles avec les navigateurs.

2. Si vous souhaitez « aligner horizontalement » le contenu du titre dans la zone de titre, vous devez utiliser l'attribut text-align ; vous pouvez également définir d'autres méthodes d'alignement via l'attribut text-align.

Voyons comment l'attribut caption-side définit la position du titre du tableau.

Syntaxe de base pour l'attribut côté légende :

caption-side: top | bottom | inherit

Attribut par défaut : top

S'applique à : ' tableau

animation dans l'élément -caption' : Non

description de la valeur de l'attribut côté légende :

top : Vous pouvez positionner le titre au-dessus du tableau .

bas : Le titre peut être positionné en dessous du tableau.

hériter : hérite de la position de titre de la position de titre du parent.

Exemple d'attribut côté légende :

1 Titre au-dessus du tableau

code html :

<table class="default">
    <caption><em>表的标题，位置：顶部（默认）</em></caption>
    <thead>
      <tr>
        <th>标题内容 1</th>
        <th>标题内容 2</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>页脚内容 1</td>
        <td>页脚内容 2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>主体内容 1</td>
        <td>主体内容 2</td>
      </tr>
    </tbody>
  </table>

css. Code :

caption {
  caption-side: top;
  padding: .5em;
  color: #de64a4;
}

Rendu :

2. Le titre est en dessous du tableau

Code HTML : <🎜. >

<table>
    <caption><em>表的标题，位置：底部</em></caption>
   <thead>
      <tr>
        <th>标题内容 1</th>
        <th>标题内容 2</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>页脚内容 1</td>
        <td>页脚内容 2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>主体内容 1</td>
        <td>主体内容 2</td>
      </tr>
    </tbody>
  </table>

caption {
  caption-side: bottom;
  padding: .5em;
  color: #de64a4;
}

Support du navigateur :

Remarque :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!