L'élémentHTML<colgroup> définit un groupe de colonnes au sein d'un tableau.

Exemple interactif

<table>  <caption>    Super-héros et acolytes  </caption>  <colgroup>    <col />    <col span="2" />    <col span="2" />  </colgroup>  <thead>    <tr>      <td></td>      <th scope="col">Batman</th>      <th scope="col">Robin</th>      <th scope="col">Flash</th>      <th scope="col">Kid Flash</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">Compétence</th>      <td>Intelligence, force</td>      <td>Dextérité, acrobate</td>      <td>Super vitesse</td>      <td>Super vitesse</td>    </tr>  </tbody></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

Cet élément inclut lesattributs universels.

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 est1.

Note :L'attributspan n'est pas autorisé s'il y a un ou plusieurs éléments<col> dans le<colgroup>.

Attributs obsolètes

Les attributs suivants sont obsolètes 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.

alignObsolète

Définit l'alignement horizontal de chaque cellule du groupe de colonnes. Les valeursénumérées possibles sontleft,center,right,justify etchar. Lorsque pris en charge, la valeurchar aligne le contenu textuel sur le caractère défini dans l'attributchar et sur le décalage défini par l'attributcharoff. Notez que les éléments descendants<col> peuvent remplacer cette valeur en utilisant leur propre attributalign. Utilisez plutôt la propriété CSStext-align sur les éléments<td> et<th>, car cet attribut est obsolète.

Note :L'application detext-align sur l'élément<colgroup> n'a aucun effet, car les éléments<td> et<th> ne sont pas des descendants de l'élément<colgroup> et n'en héritent donc pas.

Si le tableau n'utilise pas d'attributcolspan, utilisez le sélecteur CSStd:nth-of-type(an+b). Définisseza à zéro etb à la position de la colonne dans le tableau, par exempletd:nth-of-type(2) { text-align: right; } pour aligner à droite les cellules de la deuxième colonne.

Si le tableau utilise un attributcolspan, 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.

bgcolorObsolète

Définit la couleur de fond de chaque cellule de colonne. La valeur est une couleur HTML ; soit uncode RVB hexadécimal à 6 chiffres, préfixé par un « # », ou unmot-clé de couleur. Les autres valeurs CSS<color> ne sont pas prises en charge. Utilisez plutôt la propriété CSSbackground-color, car cet attribut est obsolète.

charObsolète

Ne fait rien. Il était initialement prévu pour définir l'alignement du contenu sur un caractère de chaque cellule du groupe de colonnes. Les valeurs typiques incluent un point (.) lorsqu'on tente d'aligner des nombres ou des valeurs monétaires. Sialign n'est pas défini surchar, cet attribut est ignoré, mais il remplacera tout de même la valeuralign des éléments<col> membres de ce groupe de colonnes.

charoffObsolète

Ne fait rien. Il était initialement prévu pour définir le nombre de caractères pour décaler le contenu de la cellule de colonne par rapport au caractère d'alignement défini par l'attributchar.

valignObsolète

Définit l'alignement vertical de chaque cellule du groupe de colonnes. Les valeursénumérées possibles sontbaseline,bottom,middle ettop. Notez que les éléments descendants<col> peuvent remplacer cette valeur en utilisant leur propre attributvalign. Utilisez plutôt la propriété CSSvertical-align sur les éléments<td> et<th>, car cet attribut est obsolète.

Note :L'application devertical-align sur l'élément<colgroup> n'a aucun effet, car les éléments<td> et<th> ne sont pas des descendants de l'élément<colgroup> et n'en héritent donc pas.

Si le tableau n'utilise pas d'attributcolspan, utilisez le sélecteur CSStd:nth-of-type(an+b). Définisseza à zéro etb à la position de la colonne dans le tableau, par exempletd:nth-of-type(2) { vertical-align: middle; } pour centrer verticalement les cellules de la deuxième colonne.

Si le tableau utilise un attributcolspan, 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.

widthObsolète

Définit une largeur par défaut pour chaque colonne du groupe de colonnes courant. En plus des valeurs standard en pixels et en pourcentage, cet attribut peut prendre la forme spéciale0*, ce qui signifie que la largeur de chaque colonne couverte doit être la largeur minimale nécessaire pour contenir le contenu de la colonne. Des largeurs relatives telles que5* peuvent également être utilisées. Notez que les éléments descendants<col> peuvent remplacer cette valeur en utilisant leur propre attributwidth. Utilisez plutôt la propriété CSSwidth, car cet attribut est obsolète.

Exemples

Voir<table> pour un exemple complet de tableau présentant les standards et bonnes pratiques courantes.

Cet exemple montre un tableau à huit colonnes divisé en trois éléments<col>.

HTML

Un élément<colgroup> est utilisé pour structurer un tableau de base en créant des groupes de colonnes. Le nombre de colonnes dans chaque groupe est défini par l'attributspan.

<table>  <caption>    Activités hebdomadaires personnelles  </caption>  <colgroup>    <col />    <col span="5" />    <col span="2" />  </colgroup>  <thead>    <tr>      <th>Période</th>      <th>Lun</th>      <th>Mar</th>      <th>Mer</th>      <th>Jeu</th>      <th>Ven</th>      <th>Sam</th>      <th>Dim</th>    </tr>  </thead>  <tbody>    <tr>      <th>Matin</th>      <td>Nettoyer la chambre</td>      <td>Entraînement de football</td>      <td>Cours de danse</td>      <td>Cours d'histoire</td>      <td>Acheter des boissons</td>      <td>Heure d'étude</td>      <td>Temps libre</td>    </tr>    <tr>      <th>Après-midi</th>      <td>Yoga</td>      <td>Club d'échecs</td>      <td>Voir des ami·e·s</td>      <td>Gymnastique</td>      <td>Fête d'anniversaire</td>      <td>Partie de pêche</td>      <td>Temps libre</td>    </tr>  </tbody></table>

CSS

Nous utilisons le CSS, au lieu des attributs HTML obsolètes, pour fournir une couleur de fond aux colonnes et aligner le contenu des cellules :

table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);}caption {  caption-side: bottom;  padding: 10px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 6px;  text-align: center;}.weekdays {  background-color: #d7d9f2;}.weekend {  background-color: #ffe8d4;}

table {  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Apprendre : Bases des tableaux HTML
• Autres éléments liés aux tableaux :<caption>,<col>,<table>,<tbody>,<td>,<tfoot>,<th>,<thead>,<tr>
• background-color : propriété CSS pour définir la couleur de fond de chaque cellule du groupe de colonnes
• border : propriété CSS pour contrôler les bordures des cellules du groupe de colonnes
• text-align : propriété CSS pour aligner horizontalement le contenu de chaque cellule du groupe de colonnes
• vertical-align : propriété CSS pour aligner verticalement le contenu de chaque cellule du groupe de colonnes
• visibility : propriété CSS pour masquer (ou afficher) les cellules d'un groupe de colonnes
• width : propriété CSS pour contrôler la largeur par défaut de chaque colonne d'un groupe de colonnes
• :nth-of-type,:first-of-type,:last-of-type : pseudo-classes CSS pour sélectionner les cellules de colonne souhaitées