Partie 7 — Les tableaux HTML : quand les utiliser et bonnes pratiques

Les tableaux HTML ont longtemps été mal utilisés. À une époque, certains développeurs les utilisaient pour créer toute la mise en page d’un site.

Aujourd’hui, c’est une mauvaise pratique. Mais cela ne veut pas dire que les tableaux sont inutiles.

Les tableaux ont un rôle très précis : afficher des données structurées. Dans cette partie, vous allez apprendre quand les utiliser, comment les structurer correctement et comment éviter les erreurs de débutant.

👉 Règle simple : un tableau sert aux données, pas au design.

1) Quand faut-il utiliser un tableau HTML ?

Un tableau est adapté lorsque les données ont :

• des lignes
• des colonnes
• une relation logique entre elles

Exemples de bons cas d’utilisation :

• tableau de prix
• liste d’utilisateurs
• résultats d’examens
• horaires
• données statistiques

Exemple réel :

Nom | Email | Rôle
Jean | jean@mail.com | Admin
Sara | sara@mail.com | Utilisateur
  

❌ Mauvais usage : utiliser un tableau pour positionner des blocs ou des images.

2) Structure de base d’un tableau HTML

Un tableau HTML est construit avec plusieurs balises spécifiques.

• <table> : le tableau
• <tr> : une ligne
• <th> : cellule d’en-tête
• <td> : cellule de données

Exemple simple :

<table>
  <tr>
    <th>Nom</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Jean</td>
    <td>jean@mail.com</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>sara@mail.com</td>
  </tr>
</table>
  

Ce tableau est déjà valide et fonctionnel.

3) Structurer proprement : thead, tbody, tfoot

Pour un tableau professionnel et accessible, il est recommandé de séparer les parties.

• <thead> : en-tête
• <tbody> : corps
• <tfoot> : pied (optionnel)

Exemple réel (tableau de tarifs) :

<table>
  <thead>
    <tr>
      <th>Offre</th>
      <th>Prix</th>
      <th>Durée</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basique</td>
      <td>10€</td>
      <td>1 mois</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>25€</td>
      <td>3 mois</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Paiement sécurisé</td>
    </tr>
  </tfoot>
</table>
  

Cette structure aide :

• le navigateur
• les lecteurs d’écran
• les développeurs

4) La balise <caption> : décrire le tableau

<caption> permet d’ajouter un titre descriptif au tableau.

<table>
  <caption>Liste des utilisateurs</caption>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jean</td>
      <td>jean@mail.com</td>
    </tr>
  </tbody>
</table>
  

Très utile pour l’accessibilité et la compréhension.

5) Fusionner des cellules : colspan et rowspan

Parfois, une cellule doit occuper plusieurs colonnes ou lignes.

colspan (colonnes)

<td colspan="2">Total</td>
  

rowspan (lignes)

<td rowspan="2">2025</td>
  

À utiliser avec modération pour garder un tableau lisible.

6) Styliser un tableau simplement avec CSS

Par défaut, un tableau HTML est peu esthétique. Le CSS permet de l’améliorer rapidement.

table {
  width: 100%;
  border-collapse: collapse;
}

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

thead {
  background: #f1f5f9;
}
  

✅ Tableau lisible, propre et professionnel.

7) Tableaux et responsive design

Les tableaux peuvent poser problème sur mobile.

Solution simple :

.table-wrapper {
  overflow-x: auto;
}
  

<div class="table-wrapper">
  <table>
    ...
  </table>
</div>
  

Cela permet de scroller horizontalement sur mobile.

8) Erreurs fréquentes à éviter

• Utiliser un tableau pour la mise en page
• Oublier <th> pour les en-têtes
• Créer des tableaux trop complexes
• Ignorer l’accessibilité

👉 Si ce n’est pas une donnée, ce n’est pas un tableau.

Vous savez maintenant quand utiliser un tableau HTML et comment le structurer proprement.

Dans la Partie 8, nous allons apprendre à créer des formulaires HTML : inputs, labels, validations de base et cas d’usage réels.

✅ Un tableau bien utilisé rend l’information claire et efficace.