Table de multiplication — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 5)

Table de multiplication

Tableaux de données · niveau 1 (application)

Énoncé

Écrire la table de multiplication de $1$ à $4$ sous forme de tableau à double entrée : la première ligne et la première colonne sont des en-têtes, la case en haut à gauche contient le signe « × ». Quels scope faut-il ?

Corrigé

La première ligne est faite d'en-têtes de colonne (scope="col", y compris la case « × », qui décrit la colonne des multiplicandes), la première cellule de chaque ligne suivante est un en-tête de ligne (scope="row"). La case « 12 » de la ligne 3 est ainsi annoncée « 3, 4, 12 ».


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Table de multiplication</title>
</head>
<body>
  <table>
    <caption>Table de multiplication de 1 à 4</caption>
    <thead>
      <tr>
        <th scope="col">×</th>
        <th scope="col">1</th>
        <th scope="col">2</th>
        <th scope="col">3</th>
        <th scope="col">4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>1</td><td>2</td><td>3</td><td>4</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>2</td><td>4</td><td>6</td><td>8</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>3</td><td>6</td><td>9</td><td>12</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>4</td><td>8</td><td>12</td><td>16</td>
      </tr>
    </tbody>
  </table>
</body>
</html>