🧩 Balise HTML Table : La clé pour structurer les données

Dans le monde du HTML, certaines balises existent…
Elles ne crient pas, ne s’agitent pas, n’ont pas d’animations — mais quand les données arrivent, les projecteurs sont pour elles.

Et cette balise, c’est :

<table> 💼📊

L’Excel des données, le gardien de l’ordre, le professeur qui dit :
« Tout le monde à sa place, s’il vous plaît. »

🤔 Qu’est-ce qu’un tableau ? Pourquoi sauve-t-il des vies ?

La balise HTML <table> existe pour afficher des données significatives, liées et structurées selon une logique de lignes et de colonnes.

Les tableaux sont idéaux pour :

• Listes d’étudiants
• Comparaisons produit–prix
• Emplois du temps
• Récapitulatifs de commandes
• Statistiques
• Les tableaux “qui a bu combien de café” ☕😄

❗ RÈGLE D’OR

Tableau = Données
Design = CSS (Flexbox / Grid)

Si tu essaies de créer une mise en page avec des tableaux, HTML te jugera… silencieusement.

🧱 Anatomie d’un tableau (Ouvrons-le)

Un tableau HTML est en réalité comme un mini-organisme.

🔹 Structure de base

<table>
  <tr>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

Mais sous cette forme, le tableau est :

• Sans identité
• Sans en-tête
• En pleine crise existentielle : « Qui suis-je ? »

Alors faisons ça correctement.

👨‍👩‍👧‍👦 Les balises du tableau (Présentation de la famille)

<table>

➡ Le tableau lui-même
➡ Tout vit à l’intérieur

<tr> (Table Row)

➡ Une ligne
➡ Se déplace horizontalement

<td> (Table Data)

➡ Une cellule
➡ Là où vivent les données

<th> (Table Header)

➡ Cellule d’en-tête
➡ En gras et centrée par défaut
➡ CRUCIALE pour l’accessibilité

🧪 Exemple pratique : Tableau des notes des étudiants

<table>
  <tr>
    <th>Nom complet</th>
    <th>Département</th>
    <th>Partiel</th>
    <th>Final</th>
  </tr>
  <tr>
    <td>Cansu Porsuk</td>
    <td>Informatique</td>
    <td>90</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Ali Yılmaz</td>
    <td>Génie logiciel</td>
    <td>80</td>
    <td>85</td>
  </tr>
</table>

🎯 Qu’avons-nous appris ici ?

• La première ligne est l’en-tête
• Les autres lignes sont des données
• Le navigateur comprend automatiquement le tableau

🎩 Niveau professionnel : <thead>, <tbody>, <tfoot>

Maintenant, on met un costume au tableau.

<table>
  <thead>
    <tr>
      <th>Produit</th>
      <th>Quantité</th>
      <th>Prix</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Café</td>
      <td>2</td>
      <td>50₺</td>
    </tr>
    <tr>
      <td>Chocolat</td>
      <td>1</td>
      <td>30₺</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <th>80₺</th>
    </tr>
  </tfoot>
</table>

💡 Pourquoi est-ce important ?

• L’accessibilité s’améliore ♿
• Les lecteurs d’écran comprennent mieux le tableau
• Mettre à jour tbody dynamiquement avec JavaScript devient plus simple
• Une structure significative est créée pour le SEO

🧙 Magie de la fusion des cellules

colspan – Fusion horizontale

<td colspan="3">Total général</td>

rowspan – Fusion verticale

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

🧠 Astuce :
Si tu utilises rowspan, n’oublie pas de réduire le nombre de cellules dans les lignes en dessous — sinon ton tableau entre dans la Matrice.

🎨 Pas de tableau sans CSS (Les faits)

Style de tableau minimal et élégant :

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
  }

  thead {
    background-color: #f5f5f5;
  }

  tbody tr:hover {
    background-color: #f0f8ff;
  }
</style>

✨ Maintenant ton tableau est :

• Lisible
• Doté d’effets au survol
• Avec une vibe “ce n’est pas un junior qui a écrit ça”

📱 Astuce tableau responsive (De l’or pur)

Les tableaux peuvent être compliqués sur mobile.
La solution la plus simple :

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

💡 Résultat :

• Pas de débordement
• Le défilement horizontal apparaît
• Les utilisateurs gardent leur santé mentale

♿ Accessibilité (A11Y) – Astuces

<table>
  <caption>Liste des notes des étudiants – 2025</caption>

✔ <caption> donne du sens au tableau
✔ De l’or pour les lecteurs d’écran
✔ Amical pour le SEO

🚨 Les péchés les plus courants des tableaux

❌ Utiliser <table> pour la mise en page
❌ Transformer tout en <td>
❌ Mettre les en-têtes en gras et s’arrêter là
❌ Laisser des tableaux sans CSS
❌ Ne pas tester sur mobile

HTML pardonne… mais les utilisateurs, non 😄

❤️ Derniers mots

La balise HTML table :

• Discipline les données
• Met de l’ordre dans le chaos
• Bien utilisée → légendaire
• Mal utilisée → « Qui a écrit ça ? »

S’il y a :

Données → Tableau
Design → Flexbox / Grid