Vous affichez la liste des dernières factures d'un utilisateur dans un tableau : la date, le montant, le statut du paiement. Chaque valeur doit être rangée quelque part, dans une cellule ordinaire du tableau, pas dans l'intitulé de colonne qui annonce ce que chaque colonne représente.
C'est exactement le rôle de la balise <td> : elle porte une donnée, une valeur parmi d'autres, et se distingue nettement de la cellule qui joue un rôle d'en-tête, <th>.
Définition
<td> signifie « table data », donnée de tableau. C'est la cellule qui contient une valeur ordinaire à l'intérieur d'un tableau : une date, un prix, un statut, un nom, tout ce qui n'est pas un intitulé de ligne ou de colonne. Elle se place à l'intérieur d'une ligne, elle-même délimitée par la balise tr.
Chaque td correspond à une cellule, positionnée dans l'ordre où elle apparaît à l'intérieur de sa ligne. Le navigateur aligne automatiquement les cellules en colonnes selon leur position, sans qu'il soit nécessaire de préciser explicitement dans quelle colonne chacune doit tomber.
Fusionner des cellules : colspan et rowspan
Deux attributs permettent à une cellule de couvrir plusieurs colonnes ou plusieurs lignes à la fois. colspan="2" étale la cellule sur deux colonnes, utile par exemple pour une ligne de sous-total qui réunit deux intitulés en un seul intitulé large. rowspan="3" l'étale sur trois lignes, pratique quand une même catégorie s'applique à plusieurs lignes consécutives et qu'il serait redondant de la répéter à chaque ligne.
Ces deux attributs changent le nombre de cellules attendu sur les lignes concernées : une cellule fusionnée sur deux colonnes compte pour deux dans le calcul du nombre total de colonnes de sa ligne, ce qui oblige à retirer une cellule ailleurs sur cette même ligne pour que l'ensemble reste cohérent.
Un piège fréquent avec colspan et rowspan est d'oublier qu'une cellule fusionnée réduit le nombre de td à écrire sur les lignes qu'elle traverse. Dans l'exemple ci-dessous, la première ligne ne compte que deux cellules après celle fusionnée sur deux colonnes, parce que cette dernière occupe déjà la place de deux. Oublier ce calcul décale silencieusement toutes les colonnes qui suivent, et le tableau devient illisible.
<table>
<tr><td rowspan="2">Hébergement</td><td>Nom de domaine</td><td>12 €</td></tr>
<tr><td>Certificat SSL</td><td>0 €</td></tr>
<tr><td colspan="2">Total</td><td>12 €</td></tr>
</table>Ce qu'une cellule peut contenir
Une cellule td n'est pas limitée à du texte ou à un nombre. Elle peut contenir une image, un lien, un bouton, un champ de formulaire, ou même plusieurs paragraphes : le contenu autorisé dépend du contexte, pas d'une restriction propre à td. Un tableau de produits peut par exemple placer un bouton « Ajouter au panier » directement dans la cellule du prix.
Une cellule vide reste importante pour la structure : mieux vaut écrire <td></td> qu'omettre la cellule, sous peine de décaler toutes les colonnes suivantes de cette ligne.
| Attribut | Rôle | Exemple |
|---|---|---|
colspan | Fusionne des colonnes voisines | colspan="2" |
rowspan | Fusionne des lignes voisines | rowspan="3" |
headers | Relie la cellule à un ou plusieurs en-têtes par leur identifiant, utile sur les tableaux complexes | headers="mois total" |
Différence avec th
La différence entre td et th ne se voit pas forcément à l'écran, un navigateur affiche souvent les deux de façon proche, mais dans le sens qu'elles donnent au document. th annonce qu'une cellule sert d'en-tête pour d'autres cellules, une information que les lecteurs d'écran exploitent pour rappeler l'intitulé de colonne ou de ligne avant chaque valeur parcourue. td ne porte aucune indication de ce type, elle reste neutre, une valeur parmi d'autres.
Cette distinction compte particulièrement sur un tableau qui dépasse quelques lignes : sans th correctement posé, un utilisateur non-voyant perd rapidement le fil de la colonne qu'il est en train d'écouter, puisque rien ne lui rappelle l'intitulé.
Bonnes pratiques
Réservez td aux valeurs réelles du tableau, jamais à un intitulé de ligne ou de colonne : cette distinction sert avant tout la lecture au clavier ou au lecteur d'écran. N'utilisez jamais un tableau pour la mise en page d'une page entière, un tableau doit décrire des données réellement organisées en lignes et en colonnes. Alignez les nombres à droite en CSS pour faciliter la comparaison visuelle d'une colonne à l'autre, un réglage que td ne fait jamais par défaut.
Questions fréquentes
Un td vide doit-il quand même être écrit ?
Oui, toujours. Omettre une cellule vide plutôt que d'écrire <td></td> décale toutes les cellules suivantes de cette ligne vers la gauche, et le tableau entier perd son alignement en colonnes dès la ligne concernée.
Peut-on combiner colspan et rowspan sur une même cellule ?
Oui, les deux attributs peuvent être posés ensemble sur le même td, qui s'étale alors à la fois sur plusieurs colonnes et plusieurs lignes. Cette combinaison complique cependant beaucoup la lecture du tableau pour un lecteur d'écran, mieux vaut la réserver aux cas où elle apporte une réelle clarté visuelle.
Pourquoi mes nombres ne s'alignent pas à droite comme dans un tableur ?
Parce que td n'a aucun alignement particulier par défaut, son contenu s'aligne à gauche comme du texte ordinaire. L'alignement à droite des valeurs numériques, habituel dans un tableur, se règle en CSS avec une règle text-align appliquée à la colonne ou aux cellules concernées.