Lire un tableau — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 5)

Lire un tableau

Tableaux de données · niveau 1 (application)

Énoncé

Voici un tableau extrait d'une page valide.


<table>
  <caption>Résultats du tournoi d'échecs</caption>
  <tr>
    <th scope="col">Joueur</th>
    <th scope="col" colspan="2">Parties</th>
    <th scope="col">Points</th>
  </tr>
  <tr>
    <th scope="row">Lina</th>
    <td>5 gagnées</td>
    <td>1 perdue</td>
    <td rowspan="2">5</td>
  </tr>
  <tr>
    <th scope="row">Hugo</th>
    <td>4 gagnées</td>
    <td>2 nulles</td>
  </tr>
</table>

Combien de colonnes ce tableau a-t-il ? Combien de lignes ?
Dessiner la grille et y placer chaque cellule.
Pourquoi la quatrième cellule de la troisième ligne n'est-elle pas écrite dans le code ?
Un lecteur d'écran arrive sur la case « 2 nulles ». Quels en-têtes peut-il annoncer ?

Corrigé

La première ligne compte « Joueur » (1 colonne), « Parties » (colspan="2", 2 colonnes) et « Points » (1) : le tableau a 4 colonnes. Il a 3 lignes (trois <tr>), plus la légende.
La grille :


| Joueur |      Parties         | Points |
| Lina   | 5 gagnées | 1 perdue |   5    |
| Hugo   | 4 gagnées | 2 nulles |  (5)   |

La cellule « 5 » porte rowspan="2" : elle couvre la dernière colonne des lignes de Lina et de Hugo.

Parce que cette case est déjà couverte par le rowspan="2" de la ligne précédente : la décrire à nouveau ajouterait une cinquième colonne.
L'en-tête de ligne « Hugo » (scope="row") et l'en-tête de colonne « Parties » (scope="col", qui s'étend sur les deux colonnes qu'il couvre) : « Hugo, Parties, 2 nulles ».

Remarque : les deux joueurs ont bien 5 points si une partie gagnée vaut 1 et une nulle $\frac{1}{2}$ ; le rowspan exprime cette égalité.