La création de tableaux

Créer un tableau simple

La création d’un tableau en HTML nécessite plusieurs balises qui s’enchaînent dans un ordre précis : table pour déclarer le tableau, tr (table row) pour créer une ligne, puis à l’intérieur, autant de td (table data) que de cellules nécessaires.

<!-- Tout tableau débute par la balise table -->
<table>
  <tr>
      <td>Ligne 1 : cellule 1</td>
      <td>Ligne 1 : cellule 2</td>
      <td>Ligne 1 : cellule 3</td>
  </tr>
  <tr>
      <td>Ligne 2 : cellule 1</td>
      <td>Ligne 2 : cellule 2</td>
      <td>Ligne 2 : cellule 3</td>
  </tr>
</table>

Structurer son tableau : thead, tbody et th

La balise thead regroupe les lignes d’en-tête, tbody contient les données. À l’intérieur du thead, on remplace les td par des th (table header) : ces cellules sont mises en gras par défaut et sont lues différemment par les lecteurs d’écran.

La balise caption, placée juste après l’ouverture de table, donne un titre accessible au tableau — l’équivalent du figcaption pour les images.

<table>
  <caption>Liste des participants à la formation</caption>
  <thead>
      <tr>
          <th>Nom</th>
          <th>Prénom</th>
          <th>Ville</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Dupont</td>
          <td>Marie</td>
          <td>Lyon</td>
      </tr>
      <tr>
          <td>Martin</td>
          <td>Paul</td>
          <td>Paris</td>
      </tr>
      <tr>
          <td>Durand</td>
          <td>Sophie</td>
          <td>Marseille</td>
      </tr>
  </tbody>
</table>

• thead : en-tête du tableau — contient les intitulés de colonnes avec des balises th
• tbody : corps du tableau — contient les données avec des balises td
• tfoot : pied du tableau (optionnel) — utile pour afficher des totaux ou des résumés
• caption : titre du tableau — visible et lu par les lecteurs d’écran

Styliser son tableau en CSS

Par défaut, un tableau HTML s’affiche sans bordure ni espacement. Quelques propriétés CSS suffisent à le rendre lisible.

/* Bordures fusionnées : les cellules partagent leurs bordures */
table {
  border-collapse: collapse;
  width: 100%;
}

/* Bordure et espacement sur toutes les cellules */
th, td {
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

/* Style distinctif pour l'en-tête */
th {
  background-color: #34495e;
  color: white;
}

/* Alternance de couleur pour faciliter la lecture */
tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

Fusionner des cellules

Dans certains tableaux, vous aurez besoin de fusionner des cellules entre elles. Deux attributs existent :

• colspan : fusionne des cellules horizontalement (sur plusieurs colonnes)
• rowspan : fusionne des cellules verticalement (sur plusieurs lignes)

Fusion horizontale avec colspan

L’attribut colspan s’ajoute sur la cellule qui doit s’étendre. Sa valeur indique le nombre de colonnes occupées. Les cellules absorbées par la fusion doivent être supprimées du code.

<table>
  <tr>
      <td>Ligne 1 : cellule 1</td>
      <td>Ligne 1 : cellule 2</td>
      <td>Ligne 1 : cellule 3</td>
  </tr>
  <tr>
      <td>Ligne 2 : cellule 1</td>
      <!-- Cette cellule occupe 2 colonnes : je supprime la cellule 3 -->
      <td colspan="2">Cellule fusionnée (colonnes 2 et 3)</td>
  </tr>
</table>

Fusion verticale avec rowspan

L’attribut rowspan fonctionne sur le même principe, mais verticalement. La cellule fusionnée s’étend sur plusieurs lignes. Attention au piège : dans les lignes suivantes, il faut retirer la cellule déjà occupée par le rowspan.

<table>
  <tr>
      <td>Ligne 1 : cellule 1</td>
      <td>Ligne 1 : cellule 2</td>
      <td>Ligne 1 : cellule 3</td>
  </tr>
  <tr>
      <td>Ligne 2 : cellule 1</td>
      <td>Ligne 2 : cellule 2</td>
      <!-- Cette cellule occupe 2 lignes -->
      <td rowspan="2">Fusion lignes 2 et 3</td>
  </tr>
  <tr>
      <!-- ⚠️ Seulement 2 cellules ici !
           La 3e colonne est déjà occupée par le rowspan -->
      <td>Ligne 3 : cellule 1</td>
      <td>Ligne 3 : cellule 2</td>
  </tr>
</table>

Bonnes pratiques

• Toujours structurer son tableau avec thead, tbody et th — même pour un petit tableau. Les lecteurs d’écran s’appuient sur cette structure pour lire les données cellule par cellule en annonçant l’en-tête correspondant.
• Ajouter un caption pour donner un titre accessible à votre tableau.
• Ne jamais utiliser un tableau pour la mise en page d’un site. Les tableaux sont réservés aux données tabulaires. Pour la mise en page, utilisez Flexbox ou CSS Grid (que nous verrons dans le module CSS).
• Garder ses tableaux simples : si un tableau nécessite de nombreuses fusions imbriquées, c’est souvent le signe qu’il faudrait le découper en plusieurs tableaux plus lisibles.