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 (

) (balise de légende) en définissant la valeur d'attribut pertinente de l'attribut css caption-side, c'est-à-dire : vous pouvez utiliser l'attribut caption-side pour spécifier où le titre est situé à côté 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

et doit toujours être le premier enfant du tableau. Ensuite, nous pouvons utiliser l'attribut caption-side pour changer sa position dans le tableau.

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>

Code CSS :

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

Rendu :

Support du navigateur :

L'attribut côté légende est pris en charge dans tous les principaux navigateurs, tels que : Chrome, Firefox, Safari, Opera, Internet Explorer 8+ et Android et iOS

Remarque :

1. IE8 ne prend en charge l'attribut côté légende que si !DOCTYPE est spécifié.

2. Deux valeurs non standard, gauche et droite, sont prises en charge dans Firefox.

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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!