Tableau HTML
créer, structurer et mettre en forme
Le rôle de chaque balise, la bonne structure, la fusion des cellules et la mise en forme confiée au CSS : la méthode pour un tableau propre et lisible.
Un tableau HTML s’écrit avec quatre balises de base : table pour le conteneur, tr pour chaque ligne, th pour les cellules d’en-tête et td pour les cellules de donnée. On le structure ensuite avec thead, tbody, tfoot et une légende caption, on fusionne au besoin des cellules avec colspan et rowspan, et l’on confie toute la mise en forme au CSS. Le tableau sert aux données, jamais à la mise en page.
- Les quatre balises :
table,tr,th,td. - La structure :
thead,tbody,tfoot,caption. - La fusion :
colspanetrowspan. - L’apparence : confiée au CSS, pas aux vieux attributs HTML.
Un tableau HTML, c’est quoi et quand l’utiliser
Un tableau HTML sert à présenter des données organisées en lignes et en colonnes : un comparatif, un planning, des résultats, une grille tarifaire. Dès qu’une information se lit naturellement en croisant une ligne et une colonne, le tableau est l’outil juste. Il s’appuie sur un jeu de balises dédiées, à commencer par table, qui enveloppe l’ensemble.
Une précision s’impose tout de suite, parce qu’elle conditionne tout le reste. Le tableau est fait pour des données, pas pour mettre en page une page entière. Il fut un temps où l’on bâtissait des sites complets avec des tableaux imbriqués pour caler colonnes et images. Cette époque est révolue : la mise en page se fait aujourd’hui avec le CSS, en particulier Flexbox et Grid.
Réservez le tableau aux vraies données. L’utiliser pour la mise en page d’une page donne un code confus, difficile à maintenir et moins accessible. Pour disposer des blocs, c’est le CSS qui s’en charge.
Les balises essentielles d’un tableau
Quatre balises forment le squelette de n’importe quel tableau, et leur imbrication suit une logique simple, du plus large au plus précis. La balise table contient des lignes ; chaque ligne, la balise tr, contient des cellules ; et chaque cellule est soit un en-tête, la balise th, soit une donnée, la balise td. Voici le genre de rendu obtenu avec une ligne d’en-têtes suivie de lignes de données.
| Jour | Matin | Après-midi |
|---|---|---|
| Lundi | Réunion d’équipe | Atelier |
| Mardi | Rédaction | Relecture |
La distinction entre th et td est le premier réflexe à prendre. Une cellule th annonce de quoi parle une colonne ou une ligne : elle s’affiche en gras et centrée par défaut, et surtout elle est lue comme un en-tête par les technologies d’assistance. Une cellule td contient la donnée elle-même. Confondre les deux, c’est priver le tableau de sa structure logique.
| Balise | Rôle |
|---|---|
table | Conteneur de tout le tableau |
tr | Une ligne du tableau |
th | Une cellule d’en-tête (colonne ou ligne) |
td | Une cellule de donnée |
thead / tbody / tfoot | Les zones : en-tête, corps, pied |
caption | La légende, le titre du tableau |
Bien structurer
en-têtes, corps et légende
Au-delà des quatre balises de base, trois zones rendent un tableau plus clair et plus robuste. La balise thead regroupe la ou les lignes d’en-tête, tbody contient le corps des données, et tfoot accueille une ligne de synthèse, un total par exemple. Cette séparation n’est pas qu’une question d’ordre : elle aide le navigateur, facilite la mise en forme et permet, sur de longs tableaux, de répéter l’en-tête à l’impression.
Deux éléments complètent l’ensemble. La balise caption, placée juste après l’ouverture du tableau, lui donne un titre, lu en premier par les lecteurs d’écran. Et l’attribut scope, posé sur une cellule th, précise si l’en-tête concerne une colonne, avec scope="col", ou une ligne, avec scope="row". Ce petit attribut relie chaque donnée à son en-tête, ce qui change tout pour une personne qui navigue à l’oreille.
Fusionner des cellules
sur une colonne ou une ligne
Il arrive qu’une cellule doive couvrir plusieurs colonnes ou plusieurs lignes : un titre de section qui chapeaute trois colonnes, une catégorie qui vaut pour deux lignes. Deux attributs s’en chargent. L’attribut colspan étend une cellule sur plusieurs colonnes, et rowspan l’étend sur plusieurs lignes. On écrit par exemple colspan="2" pour qu’une cellule en occupe deux.
Quand une cellule en absorbe deux avec colspan="2", la ligne concernée doit contenir une cellule de moins pour rester cohérente. Un compte de cellules décalé produit des cases vides ou décalées. Fusionnez avec parcimonie et vérifiez le total de colonnes à chaque ligne.
Mettre en forme avec le CSS, pas avec le HTML
C’est le point qui sépare un tableau d’aujourd’hui d’un tableau des années 2000. Les anciens attributs de présentation, border, cellpadding, cellspacing, bgcolor, sont obsolètes. La règle moderne tient en une phrase : le HTML décrit la structure, le CSS s’occupe de l’apparence. Quelques propriétés suffisent pour un tableau net.
-
Fusionner les bordures
La propriété
border-collapse: collapseréunit les bordures doubles en un trait unique, plus propre. -
Dessiner et aérer
La propriété
bordertrace les filets,paddingaère l’intérieur des cellules pour que le contenu respire. -
Aligner le contenu
La propriété
text-aligncale le texte à gauche, au centre ou à droite, selon qu’il s’agit de mots ou de nombres. -
Faciliter la lecture
Le sélecteur
tr:nth-child(even)colore une ligne sur deux, ce qui aide l’œil à suivre sur un long tableau.
Accessibilité et affichage mobile
Un tableau correct est un tableau que tout le monde peut lire, y compris à l’oreille ou sur un petit écran. Les bons réflexes se réduisent à peu de choses : utiliser de vraies cellules th pour les en-têtes plutôt que du gras décoratif, donner un titre avec caption, et poser l’attribut scope pour relier chaque en-tête à sa colonne ou sa ligne. Ces trois gestes suffisent à rendre un tableau compréhensible par un lecteur d’écran.
Reste le vrai point de douleur : un tableau large sur un téléphone. La solution la plus simple et la plus fiable consiste à envelopper le tableau dans un conteneur autorisé à défiler horizontalement, avec la propriété overflow-x: auto. Le tableau garde alors toutes ses colonnes, et l’utilisateur fait défiler latéralement au lieu de voir la page se déformer. On évite ainsi de bricoler des versions mobiles fragiles, tout en gardant des données complètes et lisibles.
Quelles sont les balises d’un tableau HTML ?
Le squelette repose sur quatre balises : table pour le conteneur, tr pour chaque ligne, th pour les cellules d’en-tête et td pour les cellules de donnée. On y ajoute thead, tbody, tfoot pour les zones et caption pour la légende.
Comment fusionner des cellules dans un tableau ?
Avec deux attributs : colspan étend une cellule sur plusieurs colonnes, rowspan sur plusieurs lignes. Après une fusion, pensez à retirer les cellules en trop pour que chaque ligne retombe sur le bon nombre de colonnes.
Comment mettre des bordures à un tableau ?
Par le CSS, pas par d’anciens attributs HTML. La propriété border-collapse: collapse fusionne les bordures doubles, et la propriété border dessine les filets. Les attributs border ou cellpadding écrits dans le HTML sont aujourd’hui obsolètes.
Comment rendre un tableau lisible sur mobile ?
La solution la plus fiable est d’envelopper le tableau dans un conteneur avec overflow-x: auto, autorisé à défiler horizontalement. Le tableau garde toutes ses colonnes et l’utilisateur fait défiler latéralement, sans casser la page.
Faut-il utiliser un tableau pour la mise en page ?
Non. Le tableau est réservé aux données organisées en lignes et colonnes. Pour la mise en page d’une page, on utilise le CSS, en particulier Flexbox et Grid, ce qui donne un code plus clair et plus accessible.
Un bon tableau HTML tient à deux idées : une structure honnête, où chaque balise joue son rôle, et une apparence entièrement gérée par le CSS. Avec ces réflexes, vos données restent lisibles, accessibles et faciles à faire évoluer.