Module 2Structurer et enrichir une page
Chapitre 9 sur 13
Les tableaux
Tableaux, caption, thead, tbody, tfoot, fusion de cellules et accessibilité.
- ≈ 120 min
- 4 leçons
- 2 vidéos
- 3 exercices
Module 2Structurer et enrichir une page
Chapitre 9 sur 13
Tableaux, caption, thead, tbody, tfoot, fusion de cellules et accessibilité.
Objectifs
Avec ce chapitre, tu sauras…
<table>, <tr>, <th> et <td> ;<caption> ;<thead>, <tbody> et <tfoot> ;colspan et rowspan ;scope ;Un tableau sert à présenter des données à deux dimensions : un emploi du temps, des tarifs, des résultats, une comparaison de produits. Pendant des années, les développeurs ont aussi utilisé les tableaux pour la mise en page de sites entiers : c'est aujourd'hui une pratique à proscrire. Le CSS (Flexbox et Grid) s'en charge beaucoup mieux.
Leçon 1
Tableau: Les quatre balises de base
| Balise | Rôle |
|---|---|
<table> | le tableau |
<tr> | une ligne (table row) |
<th> | une cellule d'en-tête (table header) : en gras et centrée par défaut |
<td> | une cellule de données (table data) |
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Leçon 2
| Balise | Rôle | Position |
|---|---|---|
<caption> | le titre du tableau, lu en premier par les lecteurs d'écran | juste après <table> |
<thead> | les lignes d'en-tête | en premier |
<tbody> | le corps : les données | au milieu (il peut y en avoir plusieurs) |
<tfoot> |
Leçon 3
| Attribut | Effet | Exemple |
|---|---|---|
colspan="2" | la cellule s'étend sur 2 colonnes (vers la droite) | un titre qui couvre deux colonnes |
rowspan="3" | la cellule s'étend sur 3 lignes (vers le bas) | un jour qui couvre trois créneaux |
Leçon 4
Vidéo · À regarder
ENHTML Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours
Dave Gray · YouTube
1Quelle balise crée une ligne ?
2Une cellule d'en-tête s'écrit avec…
3Le titre d'un tableau se met dans…
4colspan="3" fusionne…
5scope="row" indique un en-tête…
6Pour mettre deux colonnes de texte côte à côte :
L'essentiel du chapitre
<table> → lignes <tr> → cellules <th> (en-tête) ou <td> (donnée). Pas de balise de colonne.<caption> pour le titre ; <thead>, <tbody>, <tfoot> pour la structure.colspan fusionne vers la droite, rowspan vers le bas : enlève les cellules couvertes.scope="col" / scope="row" sur les <th> pour l'accessibilité.| le pied : totaux, notes |
| à la fin |
On écrit d'abord une ligne <tr>, puis ses cellules de gauche à droite, puis la ligne suivante. Il n'y a pas de balise pour les colonnes : une colonne, c'est la suite des cellules qui ont la même position dans chaque ligne. Chaque ligne doit donc avoir le même nombre de cellules (en comptant les fusions).
<table>
<tr>
<th>Ville</th>
<th>Habitants</th>
<th>Région</th>
</tr>
<tr>
<td>Casablanca</td>
<td>3 200 000</td>
<td>Casablanca-Settat</td>
</tr>
<tr>
<td>Fès</td>
<td>1 250 000</td>
<td>Fès-Meknès</td>
</tr>
</table><table><tr><th>Ville</th><th>Habitants</th><th>Région</th></tr><tr><td>Casablanca</td><td>3 200 000</td><td>Casablanca-Settat</td></tr><tr><td>Fès</td><td>1 250 000</td><td>Fès-Meknès</td></tr></table>Sans CSS, un tableau n'a pas de bordures (elles sont ajoutées ici pour la lisibilité). Tu les ajouteras en CSS avec border et border-collapse.
Les tableaux : table, tr, th, td. Tape chaque exemple en même temps que la vidéo.
<table>
<caption>Tarifs de la formation web — année 2026-2027</caption>
<thead>
<tr>
<th scope="col">Formule</th>
<th scope="col">Durée</th>
<th scope="col">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML et CSS</th>
<td>8 semaines</td>
<td>3 500 DH</td>
</tr>
<tr>
<th scope="row">JavaScript</th>
<td>6 semaines</td>
<td>3 000 DH</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Pack complet</th>
<td>14 semaines</td>
<td>5 900 DH</td>
</tr>
</tfoot>
</table><table><caption>Tarifs de la formation web — année 2026-2027</caption><thead><tr><th>Formule</th><th>Durée</th><th>Prix</th></tr></thead><tbody><tr><th>HTML et CSS</th><td>8 semaines</td><td>3 500 DH</td></tr><tr><th>JavaScript</th><td>6 semaines</td><td>3 000 DH</td></tr></tbody><tfoot><tr><th>Pack complet</th><td>14 semaines</td><td>5 900 DH</td></tr></tfoot></table>Tableau: Les balises de structure
<table>
<caption>Emploi du temps — lundi et mardi</caption>
<tr>
<th scope="col">Horaire</th>
<th scope="col">Lundi</th>
<th scope="col">Mardi</th>
</tr>
<tr>
<th scope="row">9 h – 10 h 30</th>
<td rowspan="2">Atelier HTML</td>
<td>CSS</td>
</tr>
<tr>
<th scope="row">10 h 45 – 12 h 15</th>
<td>JavaScript</td>
</tr>
<tr>
<th scope="row">14 h – 17 h</th>
<td colspan="2">Projet en équipe</td>
</tr>
</table><table><caption>Emploi du temps — lundi et mardi</caption><tr><th>Horaire</th><th>Lundi</th><th>Mardi</th></tr><tr><th>9 h – 10 h 30</th><td rowspan="2">Atelier HTML</td><td>CSS</td></tr><tr><th>10 h 45 – 12 h 15</th><td>JavaScript</td></tr><tr><th>14 h – 17 h</th><td colspan="2">Projet en équipe</td></tr></table>Quand une cellule a rowspan="2", elle occupe aussi une case de la ligne suivante : cette ligne doit donc avoir une cellule de moins. C'est l'erreur la plus fréquente : on écrit trois <td> dans la ligne suivante, et le tableau déborde d'une colonne. Astuce : dessine la grille sur papier avant de coder.
<caption> qui dit de quoi il parle ;<th>, jamais des <td> en gras ;scope="col" sur un en-tête de colonne, scope="row" sur un en-tête de ligne : le lecteur d'écran peut alors annoncer « Prix, JavaScript : 3 000 DH ».N'utilise jamais <table> pour placer des éléments côte à côte (un menu, des colonnes de texte, un formulaire). Les lecteurs d'écran annoncent « tableau de 3 colonnes, 5 lignes » et lisent le contenu dans un ordre absurde, et le tableau ne s'adapte pas au mobile. Pour la mise en page, on utilise le CSS : Flexbox et Grid.
En complément (anglais) : le chapitre « Create Tables » de Dave Gray, pour revoir la structure complète d'un tableau avec d'autres exemples.
<table><caption>Comparatif des offres d'hébergement</caption><tr><th rowspan="2">Offre</th><th colspan="2">Caractéristiques</th></tr><tr><th>Stockage</th><th>Prix / mois</th></tr><tr><th>Starter</th><td>10 Go</td><td>29 DH</td></tr><tr><th>Pro</th><td>100 Go</td><td>79 DH</td></tr><tr><th>Business</th><td colspan="2">Sur devis</td></tr></table>Ce tableau s'affiche avec une colonne qui déborde. Pourquoi ? Corrige-le.
<table>
<tr><th>Jour</th><th>Matin</th><th>Après-midi</th></tr>
<tr><td rowspan="2">Samedi</td><td>Révisions</td><td>Projet</td></tr>
<tr><td>Samedi</td><td>Sport</td><td>Libre</td></tr>
</table>Crée le bulletin d'un étudiant : un titre, un en-tête (Matière, Coefficient, Note), quatre matières dans le corps, et un pied de tableau avec la moyenne générale. Utilise caption, thead, tbody, tfoot et scope.
Écris le code HTML de ce tableau de comparaison :