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 cellules
♿
Accessibilité
📱
Responsive Design

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 :

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

Exemple simple :

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

Rendu visuel :

Nom Age
Alice 25
Bob 30

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

<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

<table>
<caption>
Ventes par trimestre
</caption>
<thead>
...
</thead>
</table>
• Titre descriptif du tableau
• Première enfant de <table>
• Améliore l'accessibilité

📋 Groupes Colonnes

<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 :

<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 :

Résultats de ventes 2024
Trimestre Ventes Objectif Écart
Q1 €125,000 €120,000 +€5,000
Q2 €135,000 €130,000 +€5,000
Total €480,000 €450,000 +€30,000

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) :

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

Fusion verticale (rowspan) :

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

Exemple complexe avec fusion combinée :

Planning des équipes
Jour Équipe A Équipe B
Matin Après-midi Matin Après-midi
Lundi Alice Bob Formation David
Mardi Charlie Alice Eve

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 - Q4 2024
Région Oct Nov Déc Total
Nord 45k 52k 48k 145k
Sud 38k 41k 55k 134k
Sous-total Zones 279k
TOTAL 83k 93k 103k 279k

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 :

Planning Équipes - Semaine 45
Jour Équipe Alpha Équipe Beta Notes
AM PM AM PM
Lun Alice Bob Formation Projet X
Mar Charlie Alice David Eve

Code de démarrage

<!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.

🔗 Liens 📝 Formulaires 🖼️ Images 📝 Contenu 📦 Imbrication 🎨 CSS