📊 Les Tableaux HTML

<table>, <tr>, <td>, <th>...

Maîtriser la structure des tableaux

Formation DWWM - 2025-2026

Au programme aujourd'hui 📋

  • 🎯 Introduction : C'est quoi un tableau ? Quand l'utiliser ?
  • 🏗️ Structure de base : table, tr, td, th
  • 📑 Organisation : thead, tbody, tfoot
  • 🔗 Fusion de cellules : colspan et rowspan
  • ♿ Accessibilité : caption, scope, headers
  • 🎨 Styling : border-collapse, spacing
  • 📱 Responsive : Tableaux adaptatifs
  • ❌ Erreurs fréquentes : Pièges à éviter
  • 💡 Cas pratiques : Exemples réels

🎓 Partie 1

Introduction

C'est quoi un tableau ?

Qu'est-ce qu'un tableau HTML ? 📊

Un tableau HTML = Grille pour organiser des données

Composé de :
  • Lignes (horizontales)
  • Colonnes (verticales)
  • Cellules (intersection ligne/colonne)
📋 Analogie de la feuille Excel :

Un tableau HTML = Une feuille de calcul

Vous avez des lignes (1, 2, 3...)
Vous avez des colonnes (A, B, C...)
Chaque case = une cellule

Parfait pour organiser des données structurées !

Anatomie d'un tableau 🔍

Structure visuelle : ┌─────────┬─────────┬─────────┐ │ Colonne1│ Colonne2│ Colonne3│ ← Ligne d'en-têtes ├─────────┼─────────┼─────────┤ │ Donnée 1│ Donnée 2│ Donnée 3│ ← Ligne 1 ├─────────┼─────────┼─────────┤ │ Donnée 4│ Donnée 5│ Donnée 6│ ← Ligne 2 ├─────────┼─────────┼─────────┤ │ Donnée 7│ Donnée 8│ Donnée 9│ ← Ligne 3 └─────────┴─────────┴─────────┘ ↑ ↑ ↑ Colonne1 Colonne2 Colonne3
💡 Vocabulaire :
Ligne = Row (horizontal) → <tr>
Colonne = Column (vertical)
Cellule = Cell → <td> ou <th>

Quand utiliser un tableau ? 🤔

✅ Utilisez un tableau pour :
  • Données tabulaires : prix, horaires, statistiques
  • Comparaisons : features de produits
  • Calendriers : planning, emploi du temps
  • Résultats : classements, scores
  • Listes structurées : contacts, inventaire
❌ N'utilisez PAS de tableau pour :
  • La mise en page → Utilisez CSS (Flexbox, Grid)
  • Positionner des éléments → CSS
  • Créer des colonnes de texte → CSS

L'histoire des tableaux 📜

🕰️ Années 90-2000 :
Les tableaux étaient utilisés pour TOUT
(même la mise en page des sites !)
💀 Mauvaise pratique des années 90 : 
<!-- ❌ NE FAITES JAMAIS ÇA ! -->
<table>
    <tr>
        <td>HEADER</td>
    </tr>
    <tr>
        <td>SIDEBAR</td>
        <td>CONTENT</td>
    </tr>
</table>
💡 Aujourd'hui :
Tableaux = UNIQUEMENT pour les données tabulaires
Layout = CSS (Flexbox, Grid)

🏗️ Partie 2

Structure de base

Les balises essentielles

Les 4 balises de base 🏗️

<table> = Le conteneur principal
<tr> = Table Row (une ligne)
<td> = Table Data (une cellule de données)
<th> = Table Header (une cellule d'en-tête)
Hiérarchie : <table> ← Conteneur global <tr> ← Ligne 1 <th>Nom</th> ← Cellule en-tête <th>Âge</th> ← Cellule en-tête </tr> <tr> ← Ligne 2 <td>Alice</td> ← Cellule donnée <td>25</td> ← Cellule donnée </tr> </table>

Premier tableau simple 💻

<table>
    <tr>
        <th>Prénom</th>
        <th>Âge</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
    </tr>
</table>
📝 Lecture :
1 tableau avec 3 lignes
Ligne 1 = En-têtes (Prénom, Âge)
Ligne 2 = Données (Alice, 25)
Ligne 3 = Données (Bob, 30)

Rendu visuel 👀

Prénom Âge
Alice 25
Bob 30
💡 Notez :
Les <th> sont en gras par défaut
Les <td> sont en texte normal

Différence th vs td 🆚

Critère <th> <td>
Usage En-tête de colonne/ligne Données normales
Style par défaut Gras + centré Normal + aligné gauche
Sémantique Définit une catégorie Contient une valeur
Accessibilité Lecteurs d'écran l'annoncent Lu comme donnée
⚠️ Important :
Utilisez <th> pour les en-têtes, pas juste pour du texte en gras !
C'est important pour l'accessibilité.

Tableau avec plus de colonnes 📊

<table>
    <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Âge</th>
        <th>Ville</th>
    </tr>
    <tr>
        <td>Dupont</td>
        <td>Alice</td>
        <td>25</td>
        <td>Paris</td>
    </tr>
    <tr>
        <td>Martin</td>
        <td>Bob</td>
        <td>30</td>
        <td>Lyon</td>
    </tr>
</table>
Nom Prénom Âge Ville
Dupont Alice 25 Paris
Martin Bob 30 Lyon

Règle d'or du tableau ⚖️

💡 Règle importante :
Toutes les lignes doivent avoir le MÊME nombre de cellules ! 
<!-- ✅ CORRECT : 3 cellules par ligne -->
<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
    </tr>
</table>

<!-- ❌ INCORRECT : Nombre différent -->
<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td>E</td>  <!-- Il manque une cellule ! -->
    </tr>
</table>

📑 Partie 3

Organisation du tableau

thead, tbody, tfoot

Les 3 sections d'un tableau 📑

<thead> = Table Head (en-tête du tableau)
<tbody> = Table Body (corps du tableau)
<tfoot> = Table Foot (pied du tableau)
📄 Analogie du document :

Un tableau = Un document structuré

<thead> = L'en-tête (titre, colonnes)
<tbody> = Le contenu principal (données)
<tfoot> = Le pied de page (totaux, notes)

Exactement comme un document Word !

Structure complète 🏗️

<table>
    <thead>
        <tr>
            <th>Produit</th>
            <th>Prix</th>
            <th>Quantité</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>Pommes</td>
            <td>2.50€</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Bananes</td>
            <td>1.80€</td>
            <td>15</td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
            <th>Total</th>
            <td>52€</td>
            <td>25</td>
        </tr>
    </tfoot>
</table>

Rendu visuel 👀

Produit Prix Quantité
Pommes 2.50€ 10
Bananes 1.80€ 15
Total 52€ 25

Pourquoi utiliser thead/tbody/tfoot ? 🤔

✅ Avantages :
  • Sémantique : Structure claire et logique
  • Accessibilité : Meilleure lecture par lecteurs d'écran
  • CSS : Ciblage facile pour le style
  • JavaScript : Manipulation plus simple
  • Print : L'en-tête/pied se répète sur chaque page
  • Sticky headers : En-tête qui colle au scroll
/* Exemple de ciblage CSS */
thead {
    background: #42affa;
    color: white;
}

tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.05);
}

tfoot {
    background: #90ee90;
    font-weight: bold;
}

Ordre des balises 📐

⚠️ Attention à l'ordre :
Le HTML permet <tfoot> AVANT <tbody>
Mais pour la clarté, suivez cet ordre : 
<!-- ✅ Ordre recommandé (logique) -->
<table>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
</table>

<!-- ⚠️ Ordre HTML5 valide mais déroutant -->
<table>
    <thead>...</thead>
    <tfoot>...</tfoot>  <!-- Avant tbody ! -->
    <tbody>...</tbody>
</table>
💡 Conseil :
Utilisez toujours l'ordre logique : thead → tbody → tfoot

🔗 Partie 4

Fusion de cellules

colspan et rowspan

colspan : Fusion horizontale ↔️

colspan = Column Span

Fusionne plusieurs COLONNES (horizontal)
colspan="2" = La cellule prend 2 colonnes
🧱 Analogie des briques :

Imaginez un mur de briques

Normale : [ ] [ ] [ ]
colspan="2" : [ ] [ ] (une brique double largeur)
colspan="3" : [ ] (prend toute la ligne)

Exemple colspan 💻

<table>
    <tr>
        <th colspan="2">Nom complet</th>
        <th>Âge</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>Dupont</td>
        <td>25</td>
    </tr>
</table>
📝 Explication :
"Nom complet" s'étend sur 2 colonnes
Donc on ne met QUE 2 cellules dans la première ligne
(au lieu de 3)
Nom complet Âge
Alice Dupont 25

rowspan : Fusion verticale ↕️

rowspan = Row Span

Fusionne plusieurs LIGNES (vertical)
rowspan="2" = La cellule prend 2 lignes
Visualisation rowspan : Sans rowspan : Avec rowspan="2" : ┌───┬───┐ ┌───┬───┐ │ A │ B │ │ A │ B │ ├───┼───┤ │ ├───┤ │ C │ D │ │ │ C │ └───┴───┘ └───┴───┘ ↑ Prend 2 lignes

Exemple rowspan 💻

<table>
    <tr>
        <th rowspan="2">Nom</th>
        <th>Téléphone</th>
    </tr>
    <tr>
        <td>06 12 34 56 78</td>
    </tr>
    <tr>
        <th rowspan="2">Bob</th>
        <td>06 98 76 54 32</td>
    </tr>
    <tr>
        <td>07 11 22 33 44</td>
    </tr>
</table>
Alice 06 12 34 56 78
06 11 22 33 44
Bob 06 98 76 54 32
07 11 22 33 44

Combiner colspan et rowspan 🔗

<table>
    <tr>
        <th colspan="2" rowspan="2">Vide</th>
        <th colspan="2">Lundi</th>
    </tr>
    <tr>
        <th>Matin</th>
        <th>Après-midi</th>
    </tr>
    <tr>
        <th rowspan="2">Salle 1</th>
        <th>8h-12h</th>
        <td>Math</td>
        <td>Français</td>
    </tr>
    <tr>
        <th>13h-17h</th>
        <td>Sport</td>
        <td>Anglais</td>
    </tr>
</table>
⚠️ Attention :
Combiner colspan et rowspan peut vite devenir complexe !
Dessinez votre tableau sur papier avant de coder.

Piège du colspan/rowspan 😱

💀 Erreur fréquente :
Oublier de réduire le nombre de cellules ! 
<!-- ❌ ERREUR : Trop de cellules -->
<table>
    <tr>
        <td colspan="2">A</td>
        <td>B</td>
        <td>C</td>  <!-- UNE cellule de trop ! -->
    </tr>
</table>

<!-- ✅ CORRECT : colspan="2" compte pour 2 cellules -->
<table>
    <tr>
        <td colspan="2">A</td>  <!-- Prend 2 places -->
        <td>B</td>              <!-- 3ème place -->
    </tr>
</table>
💡 Astuce de calcul :
Si vous avez 4 colonnes et un colspan="2"
→ Il ne faut que 3 balises <td> dans la ligne
(2 + 1 + 1 = 4 colonnes)

♿ Partie 5

Accessibilité

caption, scope, headers

L'élément caption 📝

<caption> = Titre/légende du tableau

Doit être le PREMIER élément dans <table>
Décrit le contenu du tableau 
<table>
    <caption>Liste des employés - Janvier 2025</caption>
    <thead>
        <tr>
            <th>Nom</th>
            <th>Poste</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>Développeuse</td>
        </tr>
    </tbody>
</table>
💡 Bonne pratique :
Utilisez toujours <caption> pour les tableaux de données
Important pour l'accessibilité !

L'attribut scope 🎯

scope = Précise la portée d'un en-tête

Valeurs possibles :
  • scope="col" = En-tête de colonne
  • scope="row" = En-tête de ligne
  • scope="colgroup" = Groupe de colonnes
  • scope="rowgroup" = Groupe de lignes
<table>
    <tr>
        <th scope="col">Nom</th>
        <th scope="col">Âge</th>
    </tr>
    <tr>
        <th scope="row">Alice</th>
        <td>25</td>
    </tr>
    <tr>
        <th scope="row">Bob</th>
        <td>30</td>
    </tr>
</table>

Pourquoi scope ? ♿

💡 Pour l'accessibilité :

Un lecteur d'écran annonce :
"Nom, Alice" au lieu de juste "Alice"

L'utilisateur comprend le contexte !
Avec scope : Lecteur d'écran annonce : "Tableau : Liste des employés" "En-tête de colonne : Nom" "En-tête de colonne : Âge" "En-tête de ligne : Alice, Cellule : 25" "En-tête de ligne : Bob, Cellule : 30" Sans scope : "Tableau" "Nom" "Âge" "Alice" "25" ← Pas de contexte !

L'attribut headers 🔗

headers = Lie une cellule à ses en-têtes

Pour les tableaux complexes avec plusieurs niveaux d'en-têtes 
<table>
    <tr>
        <th id="nom">Nom</th>
        <th id="lundi">Lundi</th>
        <th id="mardi">Mardi</th>
    </tr>
    <tr>
        <th id="alice" headers="nom">Alice</th>
        <td headers="alice lundi">Présente</td>
        <td headers="alice mardi">Absente</td>
    </tr>
</table>
⚠️ Note :
headers est rarement nécessaire
scope suffit dans 90% des cas

Checklist accessibilité ✅

Pour un tableau accessible :
  1. ✅ Utilisez <caption> pour décrire le tableau
  2. ✅ Utilisez <th> pour les en-têtes
  3. ✅ Ajoutez scope sur les <th>
  4. ✅ Structurez avec <thead>, <tbody>
  5. ✅ Utilisez headers si tableau complexe
  6. ✅ Évitez les tableaux pour la mise en page
<!-- ✅ Tableau accessible complet -->
<table>
    <caption>Horaires des cours - Semaine 1</caption>
    <thead>
        <tr>
            <th scope="col">Jour</th>
            <th scope="col">Matière</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Lundi</th>
            <td>HTML</td>
        </tr>
    </tbody>
</table>

🎨 Partie 6

Styling des tableaux

CSS pour les tableaux

border-collapse 🔲

border-collapse = Fusionne ou sépare les bordures

collapse = Bordures fusionnées (1px entre cellules)
separate = Bordures séparées (par défaut) 
/* Bordures fusionnées (recommandé) */
table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
}

/* Bordures séparées */
table {
    border-collapse: separate;
    border-spacing: 5px;  /* Espace entre cellules */
}
Différence visuelle :
collapse : Bordures de 1px entre cellules
separate : Bordures de 2px (1px + 1px)

Styles de base 🎨

/* Style de base pour tableau */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

/* En-têtes */
th {
    background: #42affa;
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: bold;
}

/* Cellules */
td {
    padding: 10px;
    border: 1px solid #ddd;
}

/* Lignes alternées (zebra striping) */
tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.05);
}

/* Hover */
tbody tr:hover {
    background: rgba(66, 175, 250, 0.1);
}

Tableau stylé 👀

Nom Prénom Ville
Dupont Alice Paris
Martin Bob Lyon
Durand Charlie Marseille

Autres propriétés utiles 🔧

/* Largeur de colonnes */
th:nth-child(1) { width: 30%; }
th:nth-child(2) { width: 50%; }
th:nth-child(3) { width: 20%; }

/* Alignement du texte */
td {
    text-align: left;     /* Gauche par défaut */
}

td.prix {
    text-align: right;    /* Prix à droite */
}

td.centre {
    text-align: center;   /* Centré */
}

/* Débordement de texte */
td {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Thead sticky (collant) 📌

/* En-tête qui reste visible au scroll */
table {
    border-collapse: collapse;
}

thead {
    position: sticky;
    top: 0;
    background: #42affa;
    z-index: 10;
}

/* Ombre pour mieux voir */
thead::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
💡 Cas d'usage :
Très utile pour les longs tableaux
L'en-tête reste visible quand on scroll !

📱 Partie 7

Tableaux responsive

S'adapter au mobile

Le problème sur mobile 📱

💀 Problème :
Les tableaux larges débordent sur mobile !
L'utilisateur doit scroller horizontalement 😱
Écran mobile (375px) : Table large (800px) : ┌────────────────────────────────────────┐ │ Nom │ Prénom │ Email │ Téléphone │ Vi│→ └────────────────────────────────────────┘ ↑ Déborde de l'écran !

Solution 1 : Scroll horizontal 📜

<div class="table-container">
    <table>
        <!-- Tableau normal -->
    </table>
</div>
.table-container {
    width: 100%;
    overflow-x: auto;  /* Scroll horizontal */
}

table {
    min-width: 600px;  /* Largeur minimale */
}
💡 Simple et efficace
Mais l'utilisateur doit scroller horizontalement
Pas idéal pour l'UX

Solution 2 : Masquer des colonnes 👁️

/* Sur mobile, masquer certaines colonnes */
@media (max-width: 768px) {
    /* Masquer les colonnes moins importantes */
    table td:nth-child(3),
    table th:nth-child(3),
    table td:nth-child(4),
    table th:nth-child(4) {
        display: none;
    }
}

/* Indication visuelle */
@media (max-width: 768px) {
    table::after {
        content: '← Faites défiler pour voir plus →';
        display: block;
        text-align: center;
        padding: 10px;
        font-size: 0.8em;
    }
}

Solution 3 : Tableau en cartes 🃏

/* Sur mobile : transformer en cartes */
@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    
    /* Masquer les en-têtes */
    thead {
        display: none;
    }
    
    /* Chaque ligne = une carte */
    tbody tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
    }
    
    /* Afficher le nom de la colonne avant la donnée */
    td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }
}

Exemple carte mobile 📱

<table>
    <thead>
        <tr>
            <th>Nom</th>
            <th>Email</th>
            <th>Téléphone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Nom">Alice Dupont</td>
            <td data-label="Email">alice@example.com</td>
            <td data-label="Téléphone">06 12 34 56 78</td>
        </tr>
    </tbody>
</table>
Nom: Alice Dupont
Email: alice@example.com
Téléphone: 06 12 34 56 78

👆 Rendu sur mobile

Quelle solution choisir ? 🤔

Solution Avantages Inconvénients Usage
Scroll horizontal Simple, rapide UX moyenne Tableaux simples
Masquer colonnes Garde la structure Perte d'information Colonnes optionnelles
Mode carte Très lisible Plus de code CSS Tableaux complexes
💡 Recommandation :
Utilisez le mode carte pour les tableaux importants
C'est la meilleure UX sur mobile !

❌ Partie 8

Erreurs fréquentes

Pièges à éviter

Erreur 1 : Tableau pour la mise en page ❌

💀 Ne JAMAIS faire : 
<!-- ❌ MAUVAIS : Tableau pour le layout -->
<table>
    <tr>
        <td>Logo</td>
        <td>Menu</td>
    </tr>
    <tr>
        <td>Sidebar</td>
        <td>Contenu</td>
    </tr>
</table>
✅ À la place : 
<!-- ✅ BON : Flexbox ou Grid -->
<div class="layout">
    <header>Logo + Menu</header>
    <main>
        <aside>Sidebar</aside>
        <article>Contenu</article>
    </main>
</div>

Erreur 2 : Nombre de cellules incohérent ❌

💀 Erreur : 
<!-- ❌ ERREUR : 3 cellules puis 2 cellules -->
<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td>E</td>  <!-- Il manque une cellule ! -->
    </tr>
</table>
✅ Solutions : 
<!-- Solution 1 : Ajouter la cellule manquante -->
<tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
</tr>

<!-- Solution 2 : Cellule vide -->
<tr>
    <td>D</td>
    <td>E</td>
    <td></td>
</tr>

Erreur 3 : Oublier thead/tbody ❌

⚠️ Pas obligatoire mais recommandé : 
<!-- ⚠️ Fonctionne mais pas sémantique -->
<table>
    <tr>
        <th>Nom</th>
        <th>Âge</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
</table>
✅ Mieux : 
<table>
    <thead>
        <tr>
            <th>Nom</th>
            <th>Âge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

Erreur 4 : Oublier border-collapse ❌

⚠️ Sans border-collapse :
Les bordures sont doublées (2px au lieu de 1px) 
/* ❌ Bordures doublées */
table {
    /* Pas de border-collapse */
}

th, td {
    border: 1px solid black;
}
/* Résultat : 2px entre les cellules */

/* ✅ Bordures fusionnées */
table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
}
/* Résultat : 1px entre les cellules */

Erreur 5 : td dans th ou vice-versa ❌

💀 Ne jamais faire : 
<!-- ❌ ERREUR : td dans thead -->
<thead>
    <tr>
        <td>Nom</td>  <!-- Devrait être <th> ! -->
        <td>Âge</td>
    </tr>
</thead>

<!-- ❌ ERREUR : th dans tbody -->
<tbody>
    <tr>
        <th>Alice</th>  <!-- Devrait être <td> ! -->
        <th>25</th>
    </tr>
</tbody>
💡 Règle simple :
<th> = En-têtes (colonnes/lignes)
<td> = Données

💡 Partie 9

Cas pratiques

Exemples réels

Cas 1 : Tableau de prix 💰

<table>
    <caption>Tarifs des formations - 2025</caption>
    <thead>
        <tr>
            <th scope="col">Formation</th>
            <th scope="col">Durée</th>
            <th scope="col">Prix</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>DWWM</td>
            <td>6 mois</td>
            <td>8 000€</td>
        </tr>
        <tr>
            <td>CDA</td>
            <td>12 mois</td>
            <td>12 000€</td>
        </tr>
    </tbody>
</table>
table {
    width: 100%;
    border-collapse: collapse;
}

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

th {
    background: #42affa;
    color: white;
}

td:nth-child(3) {
    text-align: right;
    font-weight: bold;
}

Cas 2 : Planning hebdomadaire 📅

<table>
    <caption>Planning - Semaine 3</caption>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Lundi</th>
            <th scope="col">Mardi</th>
            <th scope="col">Mercredi</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">9h-12h</th>
            <td>HTML</td>
            <td>CSS</td>
            <td>JavaScript</td>
        </tr>
        <tr>
            <th scope="row">14h-17h</th>
            <td>PHP</td>
            <td>SQL</td>
            <td>Projet</td>
        </tr>
    </tbody>
</table>

Cas 3 : Tableau de comparaison 🆚

<table>
    <caption>Comparaison des offres</caption>
    <thead>
        <tr>
            <th scope="col">Fonctionnalité</th>
            <th scope="col">Gratuit</th>
            <th scope="col">Premium</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Stockage</th>
            <td>5 Go</td>
            <td>100 Go</td>
        </tr>
        <tr>
            <th scope="row">Support</th>
            <td>Email</td>
            <td>24/7</td>
        </tr>
        <tr>
            <th scope="row">Prix</th>
            <td>0€</td>
            <td>9.99€/mois</td>
        </tr>
    </tbody>
</table>
/* Mise en évidence de la colonne Premium */
th:nth-child(3),
td:nth-child(3) {
    background: rgba(144, 238, 144, 0.1);
    font-weight: bold;
}

Cas 4 : Classement sportif 🏆

<table>
    <caption>Classement Ligue 1 - Journée 20</caption>
    <thead>
        <tr>
            <th scope="col">Pos</th>
            <th scope="col">Équipe</th>
            <th scope="col">Pts</th>
            <th scope="col">J</th>
            <th scope="col">G</th>
            <th scope="col">N</th>
            <th scope="col">P</th>
        </tr>
    </thead>
    <tbody>
        <tr class="champion">
            <td>1</td>
            <td>PSG</td>
            <td>50</td>
            <td>20</td>
            <td>16</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Marseille</td>
            <td>45</td>
            <td>20</td>
            <td>14</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </tbody>
</table>
/* Zone Champions League */
tr.champion {
    background: rgba(66, 175, 250, 0.2);
    border-left: 4px solid #42affa;
}

Checklist finale ✅

Avant de créer un tableau :
  1. ✅ Est-ce vraiment des données tabulaires ?
  2. ✅ Ai-je utilisé <caption> ?
  3. ✅ Ai-je structuré avec thead/tbody ?
  4. ✅ Ai-je utilisé <th> pour les en-têtes ?
  5. ✅ Ai-je ajouté scope ?
  6. ✅ Toutes les lignes ont le même nombre de cellules ?
  7. ✅ Ai-je pensé au responsive ?
  8. ✅ Ai-je utilisé border-collapse: collapse ?

🎉 Récapitulatif

Les points essentiels :
  • 📊 Tableaux = UNIQUEMENT pour données tabulaires
  • 🏗️ Structure : table → tr → td/th
  • 📑 Organisation : thead, tbody, tfoot
  • 🔗 Fusion : colspan (horizontal), rowspan (vertical)
  • ♿ Accessibilité : caption, scope, th
  • 🎨 Style : border-collapse: collapse
  • 📱 Mobile : Mode carte ou scroll
💡 Règle d'or :
Un bon tableau = Sémantique + Accessible + Responsive !

Vous maîtrisez les tableaux HTML ! 🚀

Merci ! 👏

Questions ?

📊 Exercices pratiques :

1. Créez un tableau de planning
2. Rendez-le responsive
3. Ajoutez l'accessibilité complète !