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

Exemple interactif

<table>
  <caption>
    Super-héros et acolytes
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </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 les attributs 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 est 1.

Note : L'attribut span 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.

align Obsolète

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

Note : L'application de text-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'attribut colspan, utilisez le sélecteur CSS td:nth-of-type(an+b). Définissez a à zéro et b à la position de la colonne dans le tableau, par exemple td:nth-of-type(2) { text-align: right; } pour aligner à droite les cellules de la deuxième colonne.

Si le tableau utilise 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

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

char Obsolè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. Si align n'est pas défini sur char, cet attribut est ignoré, mais il remplacera tout de même la valeur align des éléments <col> membres de ce groupe de colonnes.

charoff Obsolè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'attribut char.

valign Obsolète

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

Note : L'application de vertical-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'attribut colspan, utilisez le sélecteur CSS td:nth-of-type(an+b). Définissez a à zéro et b à la position de la colonne dans le tableau, par exemple td:nth-of-type(2) { vertical-align: middle; } pour centrer verticalement les cellules de la deuxième colonne.

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

width Obsolè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éciale 0*, 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 que 5* peuvent également être utilisées. Notez que les éléments descendants <col> peuvent remplacer cette valeur en utilisant leur propre attribut width. Utilisez plutôt la propriété CSS width, 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'attribut span.

<table>
  <caption>
    Activités hebdomadaires personnelles
  </caption>
  <colgroup>
    <col />
    <col span="5" class="weekdays" />
    <col span="2" class="weekend" />
  </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