<colgroup> : l'élément regroupant des colonnes

Exemple interactif

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td></td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts, strong</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
}

td {
  text-align: center;
}

Attributs

Comme pour tous les éléments, on peut utiliser les attributs universels sur cet élément.

span

Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <colgroup> couvre. S'il n'est pas présent, sa valeur par défaut est 1.

Note : Cet attribut est appliqué sur les attributs du groupe de colonnes, il n'a aucun effet sur les règles de style CSS qui lui sont associées ni, a fortiori, sur les cellules des membres du groupe de la colonne.

• L'attribut span n'est pas autorisé s'il y a un ou plusieurs éléments <col> dans le <colgroup>.

Attributs dépréciés

Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.

align Obsolète

Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont :

• left, aligner le contenu à gauche de la cellule
• center, centrer le contenu dans la cellule
• right, aligner le contenu à droite de la cellule
• justify, insérer des espaces dans le contenu textuel afin que le contenu soit justifié dans la cellule
• char, aligner le contenu textuel sur un caractère spécial avec un décalage minimal, défini par les attributs char et charoff.

Si cet attribut n'est pas défini, la valeur left est adoptée. Les éléments <col> descendants peuvent remplacer cette valeur en utilisant leur propre attribut align.

Note :

• N'essayez pas de définir la propriété text-align sur un sélecteur donnant un élément <colgroup>. Comme les éléments <td> ne sont pas des descendants de l'élément <colgroup>, ils n'en hériteront pas.
• Si le tableau n'utilise pas d'attribut code>colspan, utilisez un td:nth-child(an+b) sélecteur CSS par colonne, où a est le nombre total de colonnes du tableau et b est la position ordinale de cette colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété text-align peut être utilisée.
• Si le tableau utilise bien un attribut colspan, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme [colspan=n], bien que cela ne soit pas trivial.

bgcolor Obsolète

La couleur de fond du tableau. Il s'agit d'un code RVB hexadécimal à 6 chiffres, préfixé par un « # ». L'un des mots-clés de couleur prédéfinis peut également être utilisé.

Pour obtenir un effet similaire, utilisez la propriété CSS background-color.

char Obsolète

Cet attribut spécifie l'alignement du contenu d'un groupe de colonnes sur un caractère. Les valeurs typiques de cet attribut comprennent un point (.) lorsqu'on tente d'aligner des chiffres ou des valeurs monétaires. Si align n'est pas défini sur char, cet attribut est ignoré, bien qu'il sera toujours utilisé comme valeur par défaut pour le align du <col> qui sont membres de ce groupe de colonnes.

charoff Obsolète

Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport au caractère d'alignement spécifié par l'attribut char.

valign Obsolète

Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes :

• baseline, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la ligne de base des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que bottom ;
• bottom, placera le texte aussi près du bas de la cellule que possible ;
• middle, permet de centrer le texte dans la cellule ;
• and top, placera le texte aussi près du haut de la cellule que possible.

Note :

• N'essayez pas de définir la propriété vertical-align sur un sélecteur donnant un élément <col>. Comme les éléments <td> ne sont pas des descendants de l'élément <col>, ils n'en hériteront pas.
• Si le tableau n'utilise pas d'attribut colspan, utilisez le sélecteur CSS td:nth-child(an+b) où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété vertical-align peut être utilisée.
• Si le tableau utilise bien un attribut colspan, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme [colspan=n], bien que cela ne soit pas trivial.

Exemples

Veuillez consulter la page <table> pour des exemples sur <colgroup>.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés et pseudo-classes CSS notamment utiles pour mettre en forme l'élément <col> :
  • la propriété width pour contrôler la largeur de la colonne ;
  • la pseudo-classe :nth-child pour définir l'alignement des cellules de la colonne ;
  • la propriété text-align pour aligner le contenu de toutes les cellules sur le même caractère, comme « . ».