Colonne de tableau HTML

Introduction

La balise HTML <col> est utilisée pour définir séparément les propriétés de chaque colonne d'un tableau. Dans ce laboratoire, vous allez apprendre à utiliser la balise <col> pour styliser les colonnes d'un tableau HTML.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

Création d'un tableau HTML

Dans le fichier index.html de votre projet, ajoutez le code suivant pour créer un tableau HTML de base :

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <th>Nom du produit</th>
    <th>Prix</th>
    <th>Quantité</th>
  </tr>
  <tr>
    <td>Produit 1</td>
    <td>10 $</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Produit 2</td>
    <td>20 $</td>
    <td>10</td>
  </tr>
</table>

Stylisation des colonnes avec la balise <col>

Maintenant, ajoutons la balise <col> pour styliser les colonnes du tableau. Remplacez la balise <colgroup> dans le code ci-dessus par le code suivant :

<colgroup>
  <col style="background-color: lightblue" />
  <col style="background-color: lightgreen" />
  <col style="background-color: lightpink" />
</colgroup>

Dans le code ci-dessus, nous avons ajouté la balise <col> avec l'attribut style pour appliquer des couleurs de fond différentes à chaque colonne du tableau.

Utilisation de l'attribut span

Vous pouvez utiliser l'attribut span de la balise <col> pour cibler plusieurs colonnes d'un coup. Par exemple :

<colgroup>
  <col style="background-color: lightblue" />
  <col span="2" style="background-color: lightgreen" />
</colgroup>

Dans cet exemple, la deuxième balise <col> cible deux colonnes d'un coup en utilisant l'attribut span avec la valeur 2.

Utilisation d'attributs globaux et d'attributs d'événement

La balise <col> prend en charge les attributs globaux et les attributs d'événement pour ajouter un style supplémentaire et des fonctionnalités aux colonnes du tableau. Par exemple, vous pouvez utiliser l'attribut class pour ajouter une classe CSS aux colonnes :

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

Maintenant, vous pouvez appliquer des styles CSS aux colonnes du tableau en utilisant les classes .product-name et .price-quantity.

Ajout d'unités aux colonnes d'un tableau

Vous pouvez ajouter des unités aux colonnes d'un tableau, telles que des valeurs de devises ou de pourcentage, en utilisant les pseudo-éléments ::before et ::after et la feuille de style CSS. Par exemple :

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

td::before {
  content: "$";
}

td:last-of-type::after {
  content: "%";
}

Dans le code ci-dessus, le pseudo-élément ::before ajoute un signe dollar devant les valeurs dans les deux premières colonnes, tandis que le pseudo-élément ::after ajoute un signe pourcentage après les valeurs dans la dernière colonne.

Récapitulatif

Dans ce laboratoire, vous avez appris à utiliser la balise HTML <col> pour styliser les colonnes d'un tableau HTML. Vous avez également appris à utiliser l'attribut span, les attributs globaux et les attributs d'événement pour ajouter un style supplémentaire et des fonctionnalités aux colonnes du tableau. Enfin, vous avez appris à ajouter des unités aux colonnes d'un tableau à l'aide de CSS et de pseudo-éléments.