frontend / html
Listes et tableaux
Explication
Ce que vous allez apprendre
- Choisir entre liste ordonnée (
<ol>) et non ordonnée (<ul>) selon que l'ordre compte ou non - Imbriquer des listes pour représenter une arborescence (menu, catégories)
- Construire un tableau de données complet avec
<thead>,<tbody>,<tfoot>et<caption> - Utiliser
scope="col"/scope="row"pour rendre un tableau exploitable par un lecteur d'écran - Reconnaître qu'un tableau HTML ne doit jamais servir à faire de la mise en page
Dans quel contexte ?
Un designer transmet une maquette de tableau de bord avec un tableau de commandes clients. Le développeur qui l'intègre dans commandes.html empile des <div> en colonnes façon grille CSS au lieu d'un vrai <table>. Résultat : impossible de trier ou copier les données proprement dans un tableur, et un lecteur d'écran ne peut annoncer ni le nombre de colonnes ni l'en-tête associé à chaque cellule. Cette leçon montre comment reconnaître qu'on a affaire à de vraies données tabulaires, et comment les baliser correctement.
Étape 1 : après le texte isolé, les ensembles
Jusqu'ici, vous avez structuré du texte isolé : un titre, un paragraphe. La suite logique est d'apprendre à structurer des ensembles : une liste de courses, un menu de navigation, un tableau de résultats.
Étape 2 : la question à se poser face à une liste
D'abord, une liste de courses. Est-ce que l'ordre des éléments a un sens ? Non — peu importe si "café" arrive avant ou après "thé". Une liste non ordonnée (<ul>) suffit dans ce cas.
Étape 3 : et quand l'ordre compte ?
Prenons maintenant une recette de cuisine : étape 1, étape 2, étape 3. Là, inverser l'ordre changerait le résultat. Il faut une liste ordonnée (<ol>).
Cette distinction n'est pas cosmétique : un lecteur d'écran annonce "liste de 3 éléments, ordonnée" différemment d'une liste simple, et cela change la compréhension du contenu par l'utilisateur.
| Balise | Type de contenu | Exemple |
|---|---|---|
<ul> | Éléments sans ordre significatif | Liste de courses, tags |
<ol> | Éléments dont l'ordre a un sens | Étapes d'une recette, classement |
<dl> | Paires terme/définition | Glossaire, FAQ |
Prérequis
Cette leçon suppose que vous êtes déjà à l'aise avec les balises de texte de base (h1-h6, p, strong) vues à la leçon précédente.
Étape 4 : passons aux tableaux — un piège historique à connaître
Il y a eu une époque, dans les années 2000, où les tableaux HTML servaient à construire des mises en page entières, faute de mieux. C'est aujourd'hui une pratique obsolète : un tableau ne doit présenter QUE des données tabulaires, comme un export Excel.
Étape 5 : pourquoi cette règle est si stricte
La raison est encore liée à l'accessibilité. Un lecteur d'écran annonce "tableau de 3 colonnes, 4 lignes" et permet de naviguer cellule par cellule en connaissant l'en-tête correspondant — ce qui n'a de sens que pour de vraies données.
Étape 6 : le détail qui change tout, scope
Il reste un attribut facile à oublier : scope="col" ou scope="row" sur les cellules d'en-tête (<th>). Il indique explicitement à quelle colonne ou ligne appartient chaque en-tête.
Sans lui, un tableau complexe reste lisible pour une personne voyante, mais devient quasiment incompréhensible pour quelqu'un qui l'explore case par case avec un lecteur d'écran. Deux rendus identiques à l'œil, une accessibilité radicalement différente.
Piège fréquent
Ne réutilisez jamais <table> pour organiser visuellement un formulaire ou une mise en page en colonnes — pratique courante dans les années 2000, aujourd'hui obsolète et remplacée par Flexbox ou Grid en CSS. Un tableau doit contenir uniquement de vraies données tabulaires, exportables tel quel dans un fichier commandes.csv.
Et ensuite ?
Une fois listes et tableaux maîtrisés, la prochaine étape consiste à apprendre à collecter de l'information auprès de l'utilisateur grâce aux formulaires.
Commandes & code
Listes et tableaux
Structurer des ensembles d'éléments et des données tabulaires.
<!-- Liste non ordonnée -->
<ul>
<li>Café</li>
<li>Thé</li>
<li>Chocolat chaud</li>
</ul>
<!-- Liste ordonnée, avec options -->
<ol start="3" reversed>
<li>Étape 3</li>
<li>Étape 2</li>
<li>Étape 1</li>
</ol>
<!-- Listes imbriquées -->
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend</li>
</ul>
<!-- Liste de définitions -->
<dl>
<dt>HTML</dt>
<dd>Langage de structuration du contenu Web.</dd>
<dt>CSS</dt>
<dd>Langage de mise en forme visuelle.</dd>
</dl><!-- Tableau complet et accessible -->
<table>
<caption>Ventes par trimestre (en k€)</caption>
<thead>
<tr>
<th scope="col">Trimestre</th>
<th scope="col">Produit A</th>
<th scope="col">Produit B</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Q1</th>
<td>120</td>
<td>90</td>
</tr>
<tr>
<th scope="row">Q2</th>
<td>135</td>
<td>102</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>255</td>
<td>192</td>
</tr>
</tfoot>
</table>
<!-- Fusion de cellules -->
<table>
<tr>
<th colspan="2">Nom complet</th>
</tr>
<tr>
<td>Jean</td>
<td>Dupont</td>
</tr>
<tr>
<td rowspan="2">Contact</td>
<td>jean@exemple.com</td>
</tr>
<tr>
<td>+33 6 00 00 00 00</td>
</tr>
</table>Résumé
scope="col"/scope="row"sur<th>: indispensable pour l'accessibilité.<caption>documente le tableau pour tous les utilisateurs, y compris lecteurs d'écran.- Un tableau HTML sert aux données tabulaires, jamais à la mise en page.
colspan/rowspanfusionnent des cellules horizontalement/verticalement.
Exercices pratiques
Mission : reconstruire le tableau de bord commandes.html
Objectif : Remplacer une fausse grille de div par un vrai tableau HTML accessible pour un tableau de bord de commandes clients.
Contexte
Le développeur qui a intégré commandes.html a empilé des <div> en colonnes façon grille CSS pour afficher trois commandes (client, produit, montant), au lieu d'un vrai <table>. Impossible de trier ou copier les données dans un tableur, et un lecteur d'écran n'annonce ni le nombre de colonnes ni l'en-tête de chaque cellule.
Ta mission : reconstruire cette zone avec un vrai tableau accessible.