<col> : l'élément représentant une colonne

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 <col> couvre. S'il n'est pas présent, sa valeur par défaut est 1.

Attributs obsolètes

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

Définit l'alignement horizontal de chaque cellule de colonne. 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 cet attribut remplace la valeur align définie sur son élément parent <colgroup>. 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 <col> n'a aucun effet, car <col> n'a pas de descendants et donc aucun élément n'en hérite.

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 de colonne. 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 char définie sur son élément parent <colgroup>.

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 de colonne. Les valeurs énumérées possibles sont baseline, bottom, middle et top. Notez que cet attribut remplace la valeur valign définie sur son élément parent <colgroup>. 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 <col> n'a aucun effet, car <col> n'a pas de descendants et donc aucun élément n'en hérite.

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. 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 cet attribut remplace la valeur width définie sur son élément parent <colgroup>. 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 HTML <colgroup> structure un tableau de base, créant un groupe de colonnes implicite unique. Trois éléments <col> sont inclus dans le <colgroup>, créant trois colonnes stylables. L'attribut span définit le nombre de colonnes que chaque <col> doit couvrir (par défaut 1 si omis), ce qui permet de partager des attributs entre les colonnes de chaque <col>.

<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

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