Module 6 — Les tableaux : données sous scellés

Quand les informations deviennent trop nombreuses,
on les aligne.
Froidement. Méthodiquement.

🎯 Objectifs d’apprentissage

À la fin de ce module, vous serez capable de :

• Créer des tableaux HTML sémantiques et accessibles
• Structurer des données tabulaires claires
• Éviter l’erreur classique : utiliser les tableaux pour la mise en page
• Présenter des faits que personne ne pourra contester

🗂️ Le tableau HTML — Quand les faits parlent

Un tableau, ce n’est pas du design.
C’est un outil de lecture des données.

🧱 Structure de base d’un tableau

Voici un tableau propre, légal, irréprochable :

<table>
    <caption>Dossiers ouverts — Division Web</caption>

    <thead>
        <tr>
            <th scope="col">Affaire</th>
            <th scope="col">Statut</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Site fantôme</td>
            <td>En cours</td>
        </tr>
        <tr>
            <td>Fuite de données</td>
            <td>Classée</td>
        </tr>
    </tbody>
</table>

Chaque balise a un rôle précis. On ne mélange pas les genres.

🏷️ Les éléments sémantiques — L’ordre dans le chaos

🏁 <caption> — Le titre officiel

<caption>Historique des affaires traitées</caption>

• Décrit le contenu du tableau
• Lu en premier par les lecteurs d’écran
• Toujours placé juste après <table>

🧠 <thead>, <tbody>, <tfoot> — Regroupements logiques

<thead>  <!-- En-têtes -->
<tbody>  <!-- Données principales -->
<tfoot>  <!-- Résumé ou totaux -->

Exemple avec pied de tableau :

<tfoot>
    <tr>
        <th scope="row">Total</th>
        <td>2 affaires</td>
    </tr>
</tfoot>

Lisibilité humaine. Compréhension machine.

🏷️ <th> — Cellules d’en-tête

<th scope="col">Statut</th>

• Sert de référence aux cellules
• Important pour l’accessibilité
• Peut concerner une colonne ou une ligne

🎯 L’attribut scope — À qui parle-t-on ?

<th scope="col">Affaire</th>
<th scope="row">Site fantôme</th>

• scope="col" → en-tête de colonne
• scope="row" → en-tête de ligne

Indispensable pour les lecteurs d’écran. Sans ça, le tableau devient un labyrinthe.

🧩 Fusion de cellules — Cas particuliers

Parfois, les données se regroupent. On le signale clairement.

↔️ colspan — Fusion horizontale

<tr>
    <td colspan="2">Aucune nouvelle affaire ce mois-ci</td>
</tr>

Une cellule, deux colonnes.

↕️ rowspan — Fusion verticale

<tr>
    <th scope="row" rowspan="2">Site fantôme</th>
    <td>Analyse du code</td>
</tr>
<tr>
    <td>Interrogatoire développeur</td>
</tr>

Une cellule, plusieurs lignes.

⚠️ Bonnes pratiques — Règles du métier

• ❌ Ne jamais utiliser <table> pour la mise en page
• ✅ Toujours un <caption>
• ✅ Utiliser <th> pour les en-têtes
• ✅ Définir les scope
• ❌ Ne pas surcharger de fusions inutiles

Un tableau mal structuré, c’est une preuve irrecevable.

*Fin du module 6. Les données sont scellées, alignées, incontestables.

Prochain module : les formulaires… et les aveux.*