HTML Tableau : Comment Créer et Structurer vos Tableaux ?

Besoin de créer un tableau en HTML ? C’est plus simple qu’il n’y paraît.

Ce guide vous montre comment créer un tableau HTML propre et accessible, avec des exemples de code à copier-coller.

Exemple Complet d’un Tableau HTML Structuré (HTML + CSS)

Avant de détailler chaque balise, voici un exemple concret et complet. Vous pouvez copier ce code pour l’adapter à vos besoins. Il montre un tableau bien structuré qui liste des employés, avec un style CSS de base pour la lisibilité.

Le code HTML organise le contenu, et le code CSS s’occupe de la mise en forme. C’est la bonne manière de travailler sur le web.

<table>
  <caption>Liste des employés - Département Technique (Q4 2023)</caption>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Nom</th>
      <th scope="col">Poste</th>
      <th scope="col">Date d'embauche</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>101</td>
      <td>Alice Martin</td>
      <td>Développeuse Senior</td>
      <td>15/06/2021</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Bob Dupont</td>
      <td>Chef de projet</td>
      <td>01/09/2020</td>
    </tr>
    <tr>
      <td>103</td>
      <td>Carla Rossi</td>
      <td>Designer UX/UI</td>
      <td>23/01/2023</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Nombre total d'employés</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

table {
  width: 100%;
  border-collapse: collapse; /* Fusionne les bordures des cellules */
  font-family: sans-serif;
}

caption {
  font-size: 1.2em;
  font-weight: bold;
  padding: 10px;
  caption-side: top; /* Positionne le titre au-dessus du tableau */
  text-align: left;
}

th, td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

thead th {
  background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Style une ligne sur deux */
}

tfoot {
  font-weight: bold;
}

Cet exemple utilise les éléments sémantiques importants :

• <caption> : donne un titre au tableau.
• <thead> : groupe la première ligne, celle des en-têtes.
• <tbody> : contient le corps principal des données.
• <tfoot> : rassemble les informations de pied de tableau, comme les totaux.
• <th scope="col"> : indique que chaque en-tête s’applique à sa colonne. C’est crucial pour l’accessibilité.

La Structure de Base : Les Balises Essentielles

Pour créer un tableau HTML, même très simple, vous avez besoin de quatre balises de base. Tout le reste s’appuie sur cette fondation.

La logique de construction se fait toujours ligne par ligne. Vous définissez une ligne, puis vous remplissez ses cellules. Ensuite, vous passez à la ligne suivante.

Les 4 balises fondamentales

• <table> : C’est la balise qui enveloppe tout votre tableau. Elle dit au navigateur : « ce qui suit est un tableau ».
• <tr> : Signifie « table row ». Elle sert à créer une nouvelle ligne à l’intérieur du tableau.
• <td> : Signifie « table data ». Elle crée une cellule de données standard à l’intérieur d’une ligne <tr>.
• <th> : Signifie « table header ». Elle crée une cellule d’en-tête. Par défaut, le texte à l’intérieur est en gras et centré. Utilisez-la pour la première ligne ou la première colonne.

Exemple d’un tableau simple

Voici un tableau très basique qui utilise uniquement ces quatre balises. Notez comment la structure est imbriquée : les <td> sont dans les <tr>, qui sont elles-mêmes dans le <table>.

<table>
  <tr>
    <th>Produit</th>
    <th>Prix</th>
  </tr>
  <tr>
    <td>Tomates</td>
    <td>2.50€</td>
  </tr>
  <tr>
    <td>Courgettes</td>
    <td>1.80€</td>
  </tr>
</table>

Le point clé à retenir est que chaque ligne <tr> doit contenir le même nombre de cellules (<td> ou <th>) pour que le tableau soit aligné. Ici, chaque ligne a bien deux cellules, donc nous avons deux colonnes.

Structurer un Tableau Sémantique pour l’Accessibilité

Un tableau simple fonctionne, mais il manque de contexte. Pour que les navigateurs, les moteurs de recherche et les lecteurs d’écran comprennent bien vos données, vous devez utiliser des balises sémantiques. Elles ajoutent du sens à la structure.

Donner un titre avec <caption>

La balise <caption> est le titre officiel de votre tableau. Elle doit être placée juste après l’ouverture de la balise <table>. Elle explique le contenu du tableau de manière concise.

C’est la première chose que lira un lecteur d’écran pour annoncer le tableau à un utilisateur malvoyant. Ne l’oubliez jamais.

<table>
  <caption>Prix des légumes de saison</caption>
  ...
</table>

Organiser le contenu avec <thead>, <tbody> et <tfoot>

Ces trois éléments permettent de découper votre tableau en trois zones logiques : l’en-tête, le corps et le pied. C’est une pratique très importante pour la clarté du code et pour le style CSS.

• <thead> : Enveloppe la ou les lignes d’en-tête (celles avec les <th>).
• <tbody> : Enveloppe toutes les lignes de données principales. C’est là que se trouve le contenu principal de votre tableau.
• <tfoot> : Enveloppe la ou les lignes de résumé en bas du tableau (ex: totaux, conclusions).

Même si vous n’avez pas de pied de tableau, il est recommandé d’utiliser au moins <thead> et <tbody> pour séparer clairement les en-têtes du reste des données.

Associer en-têtes et données avec l’attribut scope

C’est un des attributs les plus importants pour l’accessibilité. L’attribut scope se place sur une balise <th> et indique explicitement si l’en-tête s’applique à une colonne ou à une ligne.

Ça aide les lecteurs d’écran à associer correctement une cellule de donnée à son en-tête. Quand l’utilisateur navigue dans le tableau, le lecteur d’écran peut lui rappeler « Prix : 2.50€ » au lieu de juste « 2.50€ ».

<thead>
  <tr>
    <th scope="col">Produit</th>
    <th scope="col">Prix</th>
  </tr>
</thead>

Fusionner des Cellules avec colspan et rowspan

Parfois, vous avez besoin qu’une cellule s’étende sur plusieurs colonnes ou plusieurs lignes. Pour cela, on utilise les attributs colspan et rowspan.

Ils peuvent s’appliquer aussi bien à des cellules <td> qu’à des cellules <th>.

• colspan : Fusionne une cellule avec une ou plusieurs cellules à sa droite. La valeur indique le nombre total de colonnes que la cellule doit occuper.
• rowspan : Fusionne une cellule avec une ou plusieurs cellules en dessous. La valeur indique le nombre total de lignes que la cellule doit occuper.

Exemple de fusion

Imaginez un planning. Une activité peut durer deux heures. On utilisera rowspan. Un en-tête peut couvrir deux sous-colonnes. On utilisera colspan.

<table>
  <caption>Planning de la matinée</caption>
  <thead>
    <tr>
      <th scope="col">Heure</th>
      <th colspan="2" scope="col">Détails de l'activité</th>
    </tr>
    <tr>
      <th scope="col"></th> <!-- Cellule vide pour l'alignement -->
      <th scope="col">Activité</th>
      <th scope="col">Lieu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">9:00 - 11:00</th>
      <td rowspan="2">Réunion projet A</td>
      <td rowspan="2">Salle 101</td>
    </tr>
    <tr>
       <!-- Pas de cellules ici, car la ligne du dessus les occupe déjà avec rowspan -->
    </tr>
    <tr>
      <th scope="row">11:00</th>
      <td>Pause café</td>
      <td>Cafétéria</td>
    </tr>
  </tbody>
</table>

Attention à la logique :

• Quand vous utilisez colspan="2", la ligne actuelle doit avoir une cellule de moins que les autres pour compenser.
• Quand vous utilisez rowspan="2", la ligne suivante doit avoir une cellule de moins à cet emplacement, car la cellule du dessus occupe déjà la place.

Styliser les Colonnes avec <colgroup> et <col>

Si vous voulez appliquer un style spécifique à une ou plusieurs colonnes entières (par exemple, un fond de couleur sur la colonne des prix), il existe une solution plus propre que d’ajouter une classe à chaque <td>.

On utilise pour cela les balises <colgroup> et <col>.

L’élément <colgroup> doit être placé juste après le <caption> (s’il y en a un) et avant le <thead>. À l’intérieur, on place des balises <col>, une pour chaque colonne que l’on veut styliser.

Exemple de style de colonne

Dans cet exemple, on met un fond gris clair sur la première colonne et on fixe la largeur de la colonne des prix.

<table>
  <caption>Facture N°123</caption>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col>
    <col span="2" style="width: 150px;">
  </colgroup>
  <thead>
  ...
</table>

Décortiquons ce code :

• La première balise <col> cible la première colonne et lui applique un fond gris.
• La deuxième <col> est vide. Elle ne fait rien, elle sert juste à dire « on passe à la colonne suivante ».
• La troisième <col> utilise l’attribut span="2". Cela signifie qu’elle applique son style (une largeur de 150px) aux deux colonnes suivantes. C’est pratique pour appliquer le même style à un groupe de colonnes.

Bonnes Pratiques et Erreurs à Éviter

Créer un tableau HTML est simple, mais il y a deux règles d’or à respecter pour que votre code soit moderne, accessible et facile à maintenir.

Règle n°1 : Ne jamais utiliser les tableaux pour la mise en page

Dans les débuts du web, les développeurs utilisaient des tableaux pour structurer des pages entières (menus, colonnes, etc.). C’est une très mauvaise pratique aujourd’hui.

Les tableaux doivent être utilisés pour une seule chose : afficher des données tabulaires. Pour la mise en page, utilisez CSS avec Flexbox ou Grid. Voici pourquoi :

• Accessibilité : Les lecteurs d’écran lisent les tableaux cellule par cellule, de gauche à droite. Une mise en page faite en tableau sera lue dans un ordre incohérent et incompréhensible.
• Maintenance : Le code HTML d’une mise en page en tableau est très lourd et difficile à modifier. Changer une colonne demande de retoucher chaque ligne.
• Responsive Design : Les tableaux sont rigides par nature. Il est très compliqué de les rendre adaptables aux petits écrans (mobiles) sans casser la structure.

Règle n°2 : Utiliser CSS pour le style, pas les attributs HTML obsolètes

Avant, on utilisait des attributs HTML directement sur la balise <table> pour gérer l’apparence. Ces attributs sont aujourd’hui obsolètes et ne doivent plus être utilisés. La mise en forme doit être gérée exclusivement par le CSS.

Voici la liste des anciens attributs et leurs équivalents CSS modernes :

• align : Remplacé par text-align ou les marges automatiques en CSS.
• bgcolor : Remplacé par background-color.
• border : Remplacé par la propriété border.
• cellpadding : Remplacé par la propriété padding sur les td et th.
• cellspacing : Remplacé par la propriété border-spacing sur le table.
• width : Remplacé par la propriété width.

Séparer la structure (HTML) de la présentation (CSS) rend votre code plus propre, plus flexible et plus facile à maintenir.

Pour résumer, un bon tableau HTML aujourd’hui se concentre sur la sémantique. Utilisez <caption>, <thead>, <tbody> et l’attribut scope pour donner du sens à vos données.

Toute la partie visuelle, de la largeur des colonnes aux couleurs de fond, doit être gérée dans un fichier CSS séparé. Cette méthode garantit que vos tableaux sont non seulement corrects, mais aussi accessibles et faciles à modifier.