Maîtriser le groupement de colonnes de table HTML

Introduction

La balise HTML <colgroup> est utilisée pour appliquer diverses styles à une ou plusieurs colonnes dans un tableau HTML. La balise <colgroup> élimine la nécessité de définir des styles dans chaque cellule d'un tableau. En utilisant l'attribut span de cette balise, vous pouvez appliquer des styles aux colonnes sur lesquelles vous voulez les appliquer.

Dans ce laboratoire, vous allez apprendre à créer un tableau avec des colonnes colorées à l'aide de la balise HTML <colgroup>.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer 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

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/MultimediaandGraphicsGroup -.-> html/fig_cap("Figure and Caption Association") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/fig_cap -.-> lab-70728{{"Groupement de colonnes de table HTML"}} html/tables -.-> lab-70728{{"Groupement de colonnes de table HTML"}} html/complex_tbl -.-> lab-70728{{"Groupement de colonnes de table HTML"}} html/tbl_access -.-> lab-70728{{"Groupement de colonnes de table HTML"}} end

Création du tableau HTML

Tout d'abord, créez un tableau HTML auquel vous voulez appliquer des styles à l'aide de la balise <colgroup>. Ajoutez le code suivant à votre fichier HTML :

<!doctype html>
<html>
  <head>
    <title>Table colorée</title>
  </head>
  <body>
    <table border="1">
      <caption>
        Table colorée
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Colonne 1</th>
          <th>Colonne 2</th>
          <th>Colonne 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ligne 1, Colonne 1</td>
          <td>Ligne 1, Colonne 2</td>
          <td>Ligne 1, Colonne 3</td>
        </tr>
        <tr>
          <td>Ligne 2, Colonne 1</td>
          <td>Ligne 2, Colonne 2</td>
          <td>Ligne 2, Colonne 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Le code ci-dessus crée un tableau avec une bordure de 1 et une légende "Table colorée". La balise <colgroup> contient trois balises <col> qui appliquent des couleurs différentes à trois colonnes respectivement. La balise <thead> contient trois balises <th> qui contiennent les titres de trois colonnes. Et, la balise <tbody> contient deux lignes avec trois colonnes chacune.

Écrire du CSS pour une meilleure mise en forme

Dans cette étape, nous allons utiliser le CSS pour appliquer des styles au tableau créé précédemment.

Ajoutez le code CSS suivant à votre fichier HTML :

<!doctype html>
<html>
  <head>
    <title>Table colorée</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      th {
        background-color: #4169e1;
        color: white;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        Table colorée
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Colonne 1</th>
          <th>Colonne 2</th>
          <th>Colonne 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ligne 1, Colonne 1</td>
          <td>Ligne 1, Colonne 2</td>
          <td>Ligne 1, Colonne 3</td>
        </tr>
        <tr>
          <td>Ligne 2, Colonne 1</td>
          <td>Ligne 2, Colonne 2</td>
          <td>Ligne 2, Colonne 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Revoyez le code terminé dans votre fichier index.html. Vous devriez être capable de voir le tableau de trois colonnes avec des couleurs différentes dans chaque colonne.

Sommaire

La balise HTML <colgroup> est utilisée pour appliquer diverses styles à une ou plusieurs colonnes d'un tableau en HTML, éliminant ainsi la nécessité de définir des styles dans chaque cellule d'un tableau. Dans ce laboratoire, vous avez appris à créer un tableau avec des colonnes colorées à l'aide de la balise <colgroup> et à lui appliquer des styles à l'aide du CSS.