Balise HTML `<colgroup>`

La balise HTML <colgroup> est utilisée pour spécifier un groupe de colonnes partageant des propriétés communes au sein d'un tableau. Cette balise ne peut contenir que des éléments <col>, qui définissent les propriétés des colonnes.

La balise <colgroup> est imbriquée à l'intérieur d'une balise <table>, avant <thead>, <tbody>, <tfoot> et <tr>, et après <caption>, si elle est utilisée (c'est dans la balise <caption> que s'insère la légende du tableau).

Un seul tableau HTML peut inclure plusieurs balises <colgroup>.

Syntaxe

La balise <colgroup> s'utilise par paire. Le contenu est écrit entre la balise d'ouverture (<colgroup>) et la balise de fermeture (</colgroup>).

Exemple de la balise HTML `<colgroup>` :

Balise HTML <colgroup>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Résultat

colgroup example

Attributs

Remarque : Les attributs de présentation comme align, valign et width sont dépréciés en HTML5. Utilisez plutôt les propriétés CSS (text-align, vertical-align, width).

Attribut	Valeur	Description
`align`	`left` \| `right` \| `center` \| `justify` \| `char`	Définit l'alignement du contenu de la colonne. Non pris en charge en HTML5.
`char`	caractère	Aligne le contenu de la colonne sur le caractère spécifié. Utilisé uniquement si `align="char"`. Non pris en charge en HTML5.
`charoff`	nombre	Décale le contenu de la cellule par rapport au caractère spécifié. Utilisé uniquement si `align="char"`. Non pris en charge en HTML5.
`span`	nombre	Définit le nombre de colonnes auquel l'élément `<col>` s'applique. La valeur par défaut est 1.
`valign`	`top` \| `middle` \| `bottom` \| `baseline`	Aligne le contenu verticalement. Non pris en charge en HTML5.
`width`	`%` \| `pixels` \| `relative_length`	Définit la largeur de la colonne. Non pris en charge en HTML5.

La balise <colgroup> prend également en charge les Attributs globaux et les Attributs d'événement.

Pratique

Quelle est la bonne description et utilisation de la balise HTML <colgroup> ?

La balise <colgroup> définit un groupe d'une ou plusieurs colonnes dans un tableau pour la mise en forme.<colgroup> est une balise auto-fermante.Vous ne pouvez pas utiliser de styles avec <colgroup> en HTML5.La balise <colgroup> ne prend pas en charge l'attribut span.La balise <colgroup> est utilisée pour regrouper le contenu de l'en-tête dans un tableau.

Balise HTML <colgroup> ​

Syntaxe ​

Exemple de la balise HTML <colgroup> : ​

Résultat ​