Cartes de fidélité — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 5)

Cartes de fidélité

Tableaux de données · niveau 3 (difficile)

Énoncé

Écrire un tableau comparant les cartes de fidélité : deux lignes de données (« Prix annuel » : 5 €, 5 €, 10 € ; « Remise » : 5 %, 8 %, 10 %) et trois colonnes de valeurs (« Licence », « Master », « Personnels »), les deux premières regroupées sous un en-tête commun « Étudiants ». L'en-tête « Personnels » occupe les deux lignes d'en-tête.

Corrigé

L'en-tête a deux lignes. Sur la première, « Étudiants » couvre deux colonnes (colspan="2", scope="colgroup") et « Personnels » deux lignes (rowspan="2"). Sur la seconde, seuls « Licence » et « Master » sont écrits, car la dernière case est couverte par « Personnels ». La case en haut à gauche, vide, est un <td> sur chaque ligne d'en-tête.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Forfaits</title>
</head>
<body>
  <table>
    <caption>Cartes de fidélité de la librairie</caption>
    <thead>
      <tr>
        <td></td>
        <th scope="colgroup" colspan="2">Étudiants</th>
        <th scope="col" rowspan="2">Personnels</th>
      </tr>
      <tr>
        <td></td>
        <th scope="col">Licence</th>
        <th scope="col">Master</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Prix annuel</th>
        <td>5 €</td>
        <td>5 €</td>
        <td>10 €</td>
      </tr>
      <tr>
        <th scope="row">Remise</th>
        <td>5 %</td>
        <td>8 %</td>
        <td>10 %</td>
      </tr>
    </tbody>
  </table>
</body>
</html>