Tableaux HTML

Quand les données ont des lignes et des colonnes claires — emplois du temps, feuilles de scores, comparaisons de prix, plans de places — utilisez un table HTML, pas un tas d’espaces ni une fausse grille faite de listes. Les listes ont enseigné ensembles et séquences sur un axe principal. Les tableaux enseignent des données bidimensionnelles : chaque cellule se situe à un croisement ligne–colonne avec un libellé que vous pouvez nommer. Si quelqu’un demande « qu’y a-t-il en ligne deux, colonne Score ? », un tableau est la réponse honnête.

À quoi sert un tableau

Un tableau exprime des relations sur une grille. Les lecteurs regardent le long d’une colonne ou d’une ligne pour comparer vite des valeurs. Les technologies d’assistance peuvent annoncer les en-têtes avec les cellules de données quand vous marquez les en-têtes avec th au lieu de styliser du texte td ordinaire pour le faire paraître gras. C’est pourquoi les tableaux appartiennent à l’information tabulaire — pas à la construction de la bannière, de la barre latérale et du pied de page d’un site entier avec des balises table imbriquées comme le faisaient les anciens tutoriels de mise en page. Quand votre contenu est vraiment une grille de faits comparables, le balisage de tableau mérite sa complexité.

Réponse directe

• table — tout le tableau
• tr — une ligne de tableau
• th — cellule d’en-tête (libellé de colonne ou de ligne)
• td — cellule de données
  Placez les libellés d’en-tête dans th pour que le sens soit clair pour les personnes et les outils d’assistance. Gardez le nombre de cellules cohérent d’une ligne à l’autre sauf si vous apprenez plus tard des attributs de span avancés comme colspan. Utilisez les tableaux pour des grilles de données ; utilisez CSS et des sections sémantiques pour la mise en page. Un court caption (dans la deuxième démo) nomme le jeu de données pour quiconque arrive sur la grille.

Tableau de données simple

Commencez par une ligne d’en-tête de cellules th, puis des lignes de données en cellules td. Cette forme couvre beaucoup de tableaux de scores et de feuilles de comparaison pour débutants.

Lecture de l’exemple simple

• table enveloppe toute la grille
• Chaque tr est une ligne horizontale
• La première ligne utilise th pour les libellés de colonnes (« Name », « Score »)
• Les lignes suivantes utilisent td pour les valeurs ordinaires
• Le style par défaut du navigateur peut montrer des bordures légères ou non — des leçons ultérieures couvrent les bordures ; la structure d’abord
• Comptez les cellules par ligne : les deux lignes de données ont deux cellules, comme les deux en-têtes

Caption et libellés de ligne

Un caption nomme le tableau pour tout le monde. Utiliser th dans la première colonne peut libeller chaque ligne quand les titres de ligne comptent autant que ceux de colonne. Gardez le caption court et précis.

Lecture de l’exemple avec caption

• caption devrait être le premier enfant dans table dans les motifs débutants courants
• Les en-têtes de colonnes restent dans la ligne du haut en th
• Les noms de ligne dans la première colonne peuvent aussi être th pour que « Ada » soit un libellé, pas seulement une cellule ressemblant à un nombre
• Les cellules restantes restent td pour les scores réels
• Vous ne construisez toujours pas une mise en page de page — vous décrivez un petit jeu de données

Tableaux vs listes vs mise en page

• Éléments liés ou étapes avec un axe principal → listes (ul / ol de la leçon précédente)
• Valeurs comparées sur lignes et colonnes → tableaux
• Régions de page entière (bannière, colonnes, pied) → structure sémantique + CSS plus tard, pas de gigantesques tableaux de mise en page imbriqués
  Les vieilles habitudes de « mise en page par tableaux » cassent la réactivité sur petits écrans et compliquent l’accessibilité. Si vous vous surprenez à imbriquer des tableaux seulement pour placer un logo à côté d’un menu, arrêtez et attendez les leçons de layout. La question : « Est-ce que je compare des cellules dans une grille, ou est-ce que j’essaie seulement de dessiner des boîtes sur la page ? »

Habitudes d’accessibilité pour les grilles

Préférez de vrais en-têtes th à du texte td gras qui ne fait que paraître un en-tête. Un caption clair (ou un titre voisin) indique de quoi parle la grille avant d’y entrer. Gardez les nombres de cellules par ligne alignés pour que les colonnes restent honnêtes au tabulation ou au balayage. Des attributs avancés comme scope améliorent l’association des en-têtes pour les tableaux complexes — maîtrisez d’abord solidement la séparation de base th/td, puis affinez. Ne comptez jamais sur la seule couleur pour marquer quelles cellules sont des libellés.

Pratique dans votre éditeur

1. Créez un table avec deux cellules d’en-tête (th) dans la première ligne.
2. Ajoutez trois lignes de données avec des comptes td correspondants.
3. Affichez-le dans le navigateur et confirmez que la grille se lit de gauche à droite, de haut en bas comme prévu.
4. Optionnellement ajoutez un caption et transformez la première colonne en th de libellé de ligne comme dans le second exemple.
5. Cassez volontairement une ligne avec une cellule manquante, notez la forme étrange, puis corrigez.
6. Écrivez une phrase au-dessus du tableau ou dans le caption indiquant ce que mesurent les données.
7. Demandez à un camarade quelle colonne est laquelle en n’utilisant que vos en-têtes — s’il se trompe, renommez le texte th.

Erreurs faciles

• Construire des sites entiers comme de gigantesques tableaux imbriqués (habitude de mise en page héritée)
• N’utiliser que td quand les cellules sont vraiment des en-têtes
• Nombres de cellules incohérents par ligne
• Utiliser un tableau là où un simple ul/ol exprimerait mieux une liste à un axe
• Laisser le tableau sans titre lisible par un humain (caption ou titre)
• Copier d’anciens extraits de « tableau de mise en page » dans des pages d’exercice modernes

Place après les listes

Les listes organisent des collections unidimensionnelles. Les tableaux organisent des grilles. Vous styliserez bientôt bordures et espacements ; cette leçon verrouille le squelette : table, tr, th et td avec des en-têtes honnêtes. Gardez les données tabulaires, la mise en page ailleurs, et votre CSS ultérieur décorera une structure qui a déjà du sens.

Résumé

• Les tableaux utilisent table + tr + th / td
• Pour les grilles de données tabulaires, pas la mise en page moderne de page entière
• Préférez th pour les libellés d’en-tête (colonnes et, si utile, lignes)
• caption aide à nommer le jeu de données
• Gardez les nombres de cellules cohérents d’une ligne à l’autre
• Les listes restent meilleures pour les ensembles et étapes simples sans second axe