Adloun

HTML : structurer le Web (école d'ingénieur) · Chapitre 5 · Application directe du cours

Corriger un tableau

Tableaux de données · niveau 2

Énoncé

Un camarade a écrit le tableau des menus de la cafétéria.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Prix des menus</title>
</head>
<body>
  <table>
    <caption>Menus de la cafétéria</caption>
    <tr>
      <td><b>Menu</b></td>
      <td><b>Prix étudiant</b></td>
      <td><b>Prix extérieur</b></td>
    </tr>
    <tr>
      <td>Formule complète</td>
      <td>3,30 €</td>
      <td>7,50 €</td>
    <tr>
      <td>Sandwich</td>
      <td>2,00 €</td>
      <td>4,00 €</td>
    </tr>
    <tfoot>
      <tr><td colspan="3">Tarifs 2026</td></tr>
    </tfoot>
    <tr>
      <td>Boisson</td>
    </tr>
  </table>
</body>
</html>

Le validateur répond :


$ html-validate --preset standard ex3-a-corriger.html
ex3-a-corriger.html
  27:6  error  Element <tr> must be used before <tfoot> in this context  element-permitted-order

✖ 1 problem (1 error, 0 warnings)
  • Expliquer le message du validateur.
  • Relever tous les autres défauts de ce tableau, y compris ceux que le validateur ne signale pas.
  • Écrire la version corrigée (sans la ligne « Boisson », incomplète, ni le pied « Tarifs 2026 »).

Corrigé

  • Le <tfoot> doit venir après toutes les lignes du corps : la ligne « Boisson » écrite après lui est à une place interdite. (Avant HTML5, on plaçait le pied avant le corps ; ce n'est plus le cas.)
  • Les autres défauts, que le validateur ne signale pas :
  • les en-têtes sont des <td> en gras (<b>) au lieu de <th scope="col"> ;
  • les noms de menus devraient être des en-têtes de ligne (<th scope="row">) ;
  • il n'y a ni <thead> ni <tbody> ;
  • la ligne « Formule complète » n'est pas fermée : c'est permis (le navigateur ferme <tr> tout seul), mais c'est une source d'erreurs, et le style du livre ferme toujours ses éléments ;
  • la ligne « Boisson » n'a qu'une cellule pour trois colonnes.
  • La version corrigée :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Prix des menus</title>
</head>
<body>
  <table>
    <caption>Menus de la cafétéria</caption>
    <thead>
      <tr>
        <th scope="col">Menu</th>
        <th scope="col">Prix étudiant</th>
        <th scope="col">Prix extérieur</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Formule complète</th>
        <td>3,30 €</td>
        <td>7,50 €</td>
      </tr>
      <tr>
        <th scope="row">Sandwich</th>
        <td>2,00 €</td>
        <td>4,00 €</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →