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

Bulletin de notes

Tableaux de données · niveau 1 (application)

Énoncé

Écrire la page d'un bulletin : une légende « Notes de Lina Benali, semestre 1 », trois colonnes (unité, coefficient, note sur 20), trois unités (Algorithmique, coefficient 4, note 15 ; Programmation Java, coefficient 3, note 17 ; Anglais, coefficient 1, note 12), et un pied de tableau donnant la moyenne pondérée, que l'on calculera. Utiliser <thead>, <tbody>, <tfoot> et des scope.

Corrigé

La moyenne pondérée vaut $\frac{4 \times 15 + 3 \times 17 + 1 \times 12}{4 + 3 + 1} = \frac{123}{8} = 15, 375$ . Le pied fusionne les deux premières colonnes pour son intitulé.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Bulletin</title>
</head>
<body>
  <h1>Bulletin du premier semestre</h1>
  <table>
    <caption>Notes de Lina Benali, semestre 1</caption>
    <thead>
      <tr>
        <th scope="col">Unité</th>
        <th scope="col">Coefficient</th>
        <th scope="col">Note sur 20</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Algorithmique</th>
        <td>4</td>
        <td>15</td>
      </tr>
      <tr>
        <th scope="row">Programmation Java</th>
        <td>3</td>
        <td>17</td>
      </tr>
      <tr>
        <th scope="row">Anglais</th>
        <td>1</td>
        <td>12</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row" colspan="2">Moyenne pondérée</th>
        <td>15,375</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>