Tableau à en-têtes multiples — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 5)

Tableau à en-têtes multiples

Tableaux de données · niveau 3 (difficile)

Énoncé

Les notes d'un contrôle (exercice 1, exercice 2) sont présentées par groupe : Lina est dans le groupe 1 (8 et 9), Hugo dans le groupe 2 (6 et 10). Écrire le tableau avec une ligne de titre par groupe, et relier chaque note à ses trois en-têtes par l'attribut headers. Que doit annoncer un lecteur d'écran sur la case « 10 » ?

Corrigé

Chaque en-tête reçoit un id ; chaque note liste son groupe, son élève et son exercice.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Notes par épreuve</title>
</head>
<body>
  <table>
    <caption>Notes du contrôle d'algorithmique</caption>
    <thead>
      <tr>
        <td></td>
        <th id="ex1" scope="col">Exercice 1</th>
        <th id="ex2" scope="col">Exercice 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="g1" colspan="3" scope="colgroup">Groupe 1</th>
      </tr>
      <tr>
        <th id="lina" headers="g1" scope="row">Lina</th>
        <td headers="g1 lina ex1">8</td>
        <td headers="g1 lina ex2">9</td>
      </tr>
      <tr>
        <th id="g2" colspan="3" scope="colgroup">Groupe 2</th>
      </tr>
      <tr>
        <th id="hugo" headers="g2" scope="row">Hugo</th>
        <td headers="g2 hugo ex1">6</td>
        <td headers="g2 hugo ex2">10</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Sur la case « 10 », un lecteur d'écran annonce « Groupe 2, Hugo, Exercice 2, 10 ».