Les tableaux HTML

Maîtrisez la création de tableaux HTML structurés et accessibles : en-têtes, fusion de cellules, données complexes et design responsive.

Structure de base
Fusion de cellules
Accessibilité
Design responsive

Syntaxe de base des tableaux

Les tableaux HTML permettent d’organiser des données en lignes et colonnes avec une structure claire et sémantique.

Structure minimale d’un tableau

Balises essentielles

html

<table> ← Conteneur principal
    <tr> ← Ligne (table row)
    <td>Cellule</td> ← Donnée
    <th>En-tête</th> ← En-tête
    </tr>
</table>

Exemple simple

html

<table>
    <tr>
    <th>Nom</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Alice</td>
    <td>25</td>
    </tr>
</table>

Rendu visuel

Les <th> sont en gras : c’est le seul style que le navigateur applique de lui-même. Bordures et fonds viennent de la feuille jointe.

Points importants :

<th> pour les en-têtes (gras par défaut)
<td> pour les données ordinaires
Structure en lignes (<tr>) et cellules
Bordures et styles via CSS

Structure avancée

Organisez vos tableaux avec les balises sémantiques pour une meilleure accessibilité et une structure plus claire.

Sections sémantiques

html

<table>
    <thead> ← En-tête
    <tr>
    <th>...</th>
    </tr>
    </thead>
    <tbody> ← Corps
    <tr>
    <td>...</td>
    </tr>
    </tbody>
    <tfoot> ← Pied
    <tr>
    <td>...</td>
    </tr>
    </tfoot>
</table>

Structure logique claire
Améliore l’accessibilité
CSS ciblé plus facile

Caption et titre

html

<table>
    <caption>
    Ventes par trimestre
    </caption>
    <thead>
    ...
    </thead>
</table>

Titre descriptif du tableau
Première enfant de <table>
Améliore l’accessibilité

Groupes de colonnes

html

<table>
    <colgroup>
    <col span="2">
    <col class="highlight">
    </colgroup>
    <thead>
    ...
    </thead>
</table>

Style par colonnes
Groupement logique
Optimisation CSS

Exemple : tableau structuré complet

Code HTML

html

<table class="sales-table">
    <caption>
    Résultats de ventes 2024
    </caption>
    <colgroup>
    <col class="quarter">
    <col span="3" class="data">
    </colgroup>
    <thead>
    <tr>
    <th scope="col">Trimestre</th>
    <th scope="col">Ventes</th>
    <th scope="col">Objectif</th>
    <th scope="col">Écart</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th scope="row">Q1</th>
    <td>€125,000</td>
    <td>€120,000</td>
    <td>+€5,000</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <th scope="row">Total</th>
    <td>€480,000</td>
    <td>€450,000</td>
    <td>+€30,000</td>
    </tr>
    </tfoot>
</table>

Résultat

thead, tbody et tfoot ne changent pas l’apparence : ils donnent un SENS aux trois zones, que le lecteur d’écran annonce.

Attributs des tableaux

Maîtrisez les attributs essentiels pour créer des tableaux complexes avec fusion de cellules et améliorer l’accessibilité.

Fusion de cellules

colspan (fusion horizontale)

Étend une cellule sur plusieurs colonnes
- <td colspan="3">Cellule large</td>
rowspan (fusion verticale)

Étend une cellule sur plusieurs lignes
- <td rowspan="2">Cellule haute</td>

Attributs d’accessibilité

scope

Définit la portée d’un en-tête
- scope="col" ← En-tête de colonne
- scope="row" ← En-tête de ligne
- scope="colgroup" ← Groupe colonnes
- scope="rowgroup" ← Groupe lignes
headers

Référence les en-têtes pour des tableaux complexes
- headers="month year" ← IDs des en-têtes

Exemples de fusion de cellules

Fusion horizontale (colspan)

html

<table>
    <tr>
    <th colspan="3">Titre Principal</th>
    </tr>
    <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
    </tr>
</table>

Une seule cellule couvre les trois colonnes.

Fusion verticale (rowspan)

html

<table>
    <tr>
    <td rowspan="2">Grande cellule</td>
    <td>Cellule A</td>
    </tr>
    <tr>
    <td>Cellule B</td>
    </tr>
</table>

La première cellule descend sur les deux lignes.

Exemple complexe avec fusion combinée

colspan et rowspan sur le même tableau : les en-têtes se groupent sur deux niveaux.

Bonnes pratiques

Créez des tableaux accessibles, performants et responsive qui offrent une excellente expérience utilisateur sur tous les appareils.

Accessibilité
- Balises sémantiques
  - ✅ Toujours utiliser : <th> pour les en-têtes, scope pour la portée
  - ✅ Structurer : <thead>, <tbody>, <tfoot>
- Caption descriptif
  - <caption> Résultats des ventes par région en 2024 </caption>
- Attributs pour lecteurs d’écran
  - scope="col|row" sur les <th>
  - headers="id1 id2" pour tables complexes
  - summary pour description détaillée
Design responsive
- Techniques CSS
  - .table-responsive { overflow-x: auto; white-space: nowrap; }
  - @media (max-width: 768px) { table, tbody, tr, td { display: block; } }
- Alternatives mobiles
  - Transformation en cartes empilées
  - Défilement horizontal avec indicateur
  - Masquage de colonnes secondaires
  - Pagination pour grandes tables
- Techniques avancées
  - CSS Grid pour layouts complexes
  - display: contents pour restructurer
  - CSS Container Queries
Performance
- Optimisation du DOM
  - Éviter les tableaux imbriqués profonds
  - Limiter le nombre de colonnes
  - Utiliser CSS au lieu d’attributs HTML
  - Pagination pour grandes données
- CSS efficace
  - table { table-layout: fixed; /* Performance */ border-collapse: collapse; }
- Virtualisation
  
  Pour très gros datasets, utiliser la virtualisation avec JavaScript pour ne rendre que les lignes visibles.
SEO et sémantique
- Usage approprié
  - ✅ Pour : Données tabulaires, comparaisons, rapports
  - ❌ Pas pour : Mise en page, alignement visuel
- Métadonnées structurées
  - <table itemscope itemtype="..."> <tr itemprop="...">
- Contenu descriptif
  - Titres de colonnes explicites
  - Caption informative
  - Summary pour contexte

Travaux pratiques

Créez des tableaux HTML complexes et professionnels avec ces exercices progressifs couvrant toutes les techniques.

Exercice 1 : tableau de données d’entreprise
Objectif

Créez un tableau de reporting avec structure complète, fusion de cellules et données réalistes d’entreprise.

Spécifications
- Caption descriptif pour le tableau
- Structure avec thead, tbody, tfoot
- En-têtes avec attributs scope appropriés
- Une ligne avec colspan pour sous-total
- Footer avec totaux et moyennes
Aperçu attendu

Ventes par région — la ligne de sous-total emploie colspan, le pied de tableau totalise.
Exercice 2 : planning complexe avec fusion
Mission

Créez un planning d’équipe avec fusion complexe de cellules (colspan et rowspan combinés).

Défis techniques
- En-têtes groupés sur plusieurs niveaux
- Cellules fusionnées verticalement et horizontalement
- Gestion des conflits de fusion
- Accessibilité avec scope et headers
- CSS responsive intégré
Structure complexe attendue

Un en-tête sur deux niveaux, des cellules qui descendent : c’est là que scope devient indispensable.

Code de démarrage

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercices - Tableaux HTML</title>
    <style>
        /* Styles de base pour les tableaux */
        body { font-family: Arial, sans-serif; margin: 20px; }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
            table-layout: fixed;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        caption {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
        }
        thead th { background-color: #007bff; color: white; }
        tfoot th, tfoot td { background-color: #e9ecef; font-weight: bold; }
        tbody tr:nth-child(even) { background-color: #f8f9fa; }
        tbody tr:hover { background-color: #e3f2fd; }

        /* Classes utiles */
        .text-center { text-align: center; }
        .text-right { text-align: right; }
        .highlight { background-color: #fff3cd; }
        .total-row { background-color: #d4edda; font-weight: bold; }

        /* Responsive */
        @media (max-width: 768px) {
            table { font-size: 0.8em; }
            th, td { padding: 8px 4px; }
        }
    </style>
</head>

<body>
    <h1>Exercices - Tableaux HTML</h1>

    <!-- EXERCICE 1 : TABLEAU D'ENTREPRISE -->
    <section>
        <h2>Exercice 1 : Tableau de données d'entreprise</h2>

        <table>
            <!-- TODO: Ajouter caption descriptif -->
            <caption>Ventes par région - Q4 2024</caption>

            <!-- TODO: Colgroup pour stylage par colonnes -->
            <colgroup>
                <col class="region-col">
                <col span="3" class="month-col">
                <col class="total-col">
            </colgroup>

            <!-- TODO: En-tête avec structure sémantique -->
            <thead>
                <tr>
                    <th scope="col">Région</th>
                    <th scope="col" class="text-center">Octobre</th>
                    <!-- TODO: Ajoutez les autres en-têtes de colonnes -->
                    <th scope="col" class="text-center">Novembre</th>
                    <th scope="col" class="text-center">Décembre</th>
                    <th scope="col" class="text-center">Total Q4</th>
                </tr>
            </thead>

            <!-- TODO: Corps du tableau avec données -->
            <tbody>
                <tr>
                    <th scope="row">Nord</th>
                    <td class="text-center">45 000 €</td>
                    <!-- TODO: Complétez les données -->
                    <td class="text-center">52 000 €</td>
                    <td class="text-center">48 000 €</td>
                    <td class="text-center total-cell">145 000 €</td>
                </tr>

                <!-- TODO: Ajoutez région Sud et autres régions -->
                <tr>
                    <th scope="row">Sud</th>
                    <td class="text-center">38 000 €</td>
                    <td class="text-center">41 000 €</td>
                    <td class="text-center">55 000 €</td>
                    <td class="text-center total-cell">134 000 €</td>
                </tr>

                <!-- TODO: Ligne de sous-total avec colspan -->
                <tr class="highlight">
                    <td colspan="4" class="text-center">Sous-total Zones</td>
                    <td class="text-center total-cell">279 000 €</td>
                </tr>
            </tbody>

            <!-- TODO: Pied avec totaux généraux -->
            <tfoot>
                <tr class="total-row">
                    <th scope="row">TOTAL GÉNÉRAL</th>
                    <td class="text-center">83 000 €</td>
                    <td class="text-center">93 000 €</td>
                    <td class="text-center">103 000 €</td>
                    <td class="text-center">279 000 €</td>
                </tr>
            </tfoot>
        </table>
    </section>

    <!-- EXERCICE 2 : PLANNING COMPLEXE -->
    <section>
        <h2>Exercice 2 : Planning complexe avec fusion</h2>

        <table>
            <caption>Planning des équipes - Semaine 45 (2024)</caption>

            <!-- TODO: En-têtes complexes avec fusion -->
            <thead>
                <tr>
                    <th rowspan="2" scope="col">Jour</th>
                    <!-- TODO: En-têtes groupés pour équipes -->
                    <th colspan="2" scope="colgroup" class="text-center">Équipe Alpha</th>
                    <th colspan="2" scope="colgroup" class="text-center">Équipe Beta</th>
                    <th rowspan="2" scope="col">Notes</th>
                </tr>
                <tr>
                    <!-- TODO: Sous-en-têtes pour créneaux -->
                    <th scope="col" class="text-center">Matin</th>
                    <th scope="col" class="text-center">Après-midi</th>
                    <th scope="col" class="text-center">Matin</th>
                    <th scope="col" class="text-center">Après-midi</th>
                </tr>
            </thead>

            <!-- TODO: Corps avec fusion complexe -->
            <tbody>
                <tr>
                    <th scope="row">Lundi</th>
                    <td class="text-center">Alice</td>
                    <td class="text-center">Bob</td>
                    <!-- TODO: Cellule fusionnée pour formation -->
                    <td colspan="2" class="text-center highlight">Formation équipe</td>
                    <!-- TODO: Cellule fusionnée verticalement pour projet -->
                    <td rowspan="2" class="text-center highlight">Projet X - Sprint 1</td>
                </tr>

                <!-- TODO: Complétez les autres jours -->
                <tr>
                    <th scope="row">Mardi</th>
                    <td class="text-center">Charlie</td>
                    <td class="text-center">Alice</td>
                    <td class="text-center">David</td>
                    <td class="text-center">Eve</td>
                    <!-- Note: pas de td pour "Notes" car rowspan=2 du lundi -->
                </tr>
            </tbody>
        </table>
    </section>

    <!-- Instructions pour les étudiants -->
    <section>
        <h2>Instructions</h2>
        <h3>Exercice 1 - Points à compléter :</h3>
        <ul>
            <li>Ajouter les données manquantes (régions Est, Ouest)</li>
            <li>Vérifier que tous les en-têtes ont un attribut scope approprié</li>
            <li>S'assurer que les totaux sont cohérents</li>
            <li>Ajouter des classes CSS pour le style responsive</li>
        </ul>

        <h3>Exercice 2 - Défis avancés :</h3>
        <ul>
            <li>Ajouter les jours mercredi à vendredi</li>
            <li>Créer des fusions complexes (formation sur 2 jours, projet sur 3 jours)</li>
            <li>Utiliser les attributs headers pour les cellules complexes</li>
            <li>Rendre le tableau responsive avec techniques CSS avancées</li>
        </ul>
    </section>
</body>
</html>

Structurez vos données avec style

Vous maîtrisez maintenant les tableaux HTML sous toutes leurs formes. Explorez les autres aspects du HTML pour créer des sites web complets et professionnels.

Les tableaux HTML

Syntaxe de base des tableaux

Structure minimale d’un tableau

Balises essentielles

Exemple simple

Rendu visuel

Points importants :

Structure avancée

🏗️ Sections sémantiques

📝 Caption et titre

📋 Groupes de colonnes

Exemple : tableau structuré complet

Code HTML

Résultat

Attributs des tableaux

Fusion de cellules

Attributs d’accessibilité

Exemples de fusion de cellules

Fusion horizontale (colspan)

Fusion verticale (rowspan)

Exemple complexe avec fusion combinée

Bonnes pratiques

♿ Accessibilité

📱 Design responsive

⚡ Performance

🔍 SEO et sémantique

Travaux pratiques

Exercice 1 : tableau de données d’entreprise

Objectif

Spécifications

Aperçu attendu

Exercice 2 : planning complexe avec fusion

Mission

Défis techniques

Structure complexe attendue

Code de démarrage

Structurez vos données avec style

Sections sémantiques

Caption et titre

Groupes de colonnes

Accessibilité

Design responsive

Performance

SEO et sémantique