Tableau HTML

Un tableau HTML sert à présenter des données organisées en lignes et en colonnes : un planning, un comparatif, une grille de tarifs. Dès qu’une information se lit naturellement en croisant une ligne et une colonne, le tableau est le bon outil. En revanche, il n’a jamais été conçu pour mettre en page une interface : ça, c’est le travail du CSS.

À quoi sert un tableau HTML, et quand l’utiliser

La règle est simple : un tableau présente des données tabulaires, c’est-à-dire des informations qui ont un sens en croisant une ligne et une colonne. Le tarif d’un produit selon sa formule, les horaires d’un service par jour, les caractéristiques de plusieurs modèles côte à côte : autant de cas où le tableau structure vraiment l’information.

Le piège historique, c’est d’avoir utilisé les tableaux pour positionner des éléments sur une page. Cette pratique est abandonnée depuis longtemps : elle rend le code illisible, casse l’accessibilité et complique le responsive. Pour disposer des blocs, on utilise aujourd’hui les outils de mise en page CSS. Le tableau, lui, reste dédié aux données.

La structure de base d’un tableau

Un tableau repose sur quelques balises, chacune avec un rôle précis. La balise table est le conteneur. À l’intérieur, tr (table row) définit une ligne. Dans chaque ligne, on place des cellules : th pour une cellule d’en-tête, td pour une cellule de données ordinaire.

  

    
Produit
    
Prix
  
  

    
Forfait standard
    
19 € / mois
  

La différence entre th et td n’est pas qu’esthétique. Une cellule th indique au navigateur, et surtout aux technologies d’assistance, qu’il s’agit d’un en-tête décrivant une colonne ou une ligne. C’est ce qui permet de comprendre à quoi se rapporte chaque donnée.

Structurer un tableau lisible et accessible

Pour un tableau propre, on regroupe les en-têtes et le corps avec thead et tbody. Le thead contient la ou les lignes d’en-tête, le tbody contient les données. Cette séparation clarifie le code et permet, par exemple, de figer l’en-tête lors d’un défilement.

Deux éléments font une vraie différence pour l’accessibilité. D’abord la balise caption, placée juste après l’ouverture de table, qui donne un titre au tableau. Ensuite l’attribut scope sur les th, qui précise si l’en-tête concerne une colonne (scope="col") ou une ligne (scope="row").

  
Tarifs par formule
  

    

      
Formule
      
Prix
    
  
  

    

      
Standard
      
19 € / mois
    
  

Avec cette structure, un lecteur d’écran annonce correctement à quoi correspond chaque cellule. Un tableau accessible n’est pas plus long à écrire ; il demande juste les bonnes balises au bon endroit.

Mettre en forme un tableau avec le CSS

Toute la présentation se gère en CSS, pas avec d’anciens attributs HTML. On oublie border, cellpadding ou bgcolor directement sur les balises : ces attributs de présentation sont obsolètes. À la place, on cible le tableau dans la feuille de style.

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.6rem 0.8rem;
  text-align: left;
}
thead {
  background: #f1f5f9;
}

Ces quelques règles suffisent à rendre un tableau lisible : border-collapse fusionne les bordures, un peu de padding aère les cellules, et un fond léger distingue l’en-tête. On peut ajouter une alternance de teinte une ligne sur deux pour suivre les lignes du regard. L’idée est de servir la lecture, pas de surcharger.

Rendre un tableau lisible sur mobile

C’est souvent le point négligé. Un tableau large déborde de l’écran sur mobile et casse la mise en page. La solution la plus simple consiste à placer le tableau dans un conteneur qui défile horizontalement : la ligne reste intacte, l’utilisateur fait glisser pour voir les colonnes suivantes.

Pour les tableaux vraiment denses, une autre approche consiste à repenser l’affichage en cartes empilées sur petit écran, chaque ligne devenant un bloc. C’est plus de travail, mais plus confortable à lire. Dans tous les cas, on évite un tableau qui force un zoom arrière sur le contenu.

Les erreurs fréquentes à éviter

La première reste l’usage du tableau pour la mise en page. Vient ensuite l’oubli des en-têtes, ou l’emploi de td partout, qui prive le tableau de toute sémantique. On voit aussi des attributs de présentation obsolètes laissés dans le HTML, alors que tout devrait passer par le CSS.

Autre travers : le tableau surchargé, avec trop de colonnes, qui devient illisible surtout sur mobile. Quand l’information ne tient pas, mieux vaut la scinder ou choisir un autre format. Un bon tableau reste sobre : des données réellement tabulaires, des en-têtes clairs, une mise en forme au service de la lecture.