Tableaux

Organiser des données en lignes et colonnes.

Imagine : tu dois présenter des mesures, des tarifs, ou un planning. Un tableau, c’est le plan propre et aligné : lignes, colonnes, en-têtes. Lisible d’un coup d’œil (même le lundi matin).

Un tableau HTML se compose de quelques balises clés :

<table> : le tableau en lui-même
<thead> : l’en-tête (titres des colonnes)
<tbody> : le corps (tes données)
<tfoot> (optionnel) : le pied (totaux, notes)
<tr> : une ligne
<th> : une cellule d’en-tête (titre)
<td> : une cellule de donnée

<table>
  <caption>Planning chantier – Semaine 42</caption>

  <thead>
    <tr>
      <th scope="col">Jour</th>
      <th scope="col">Équipe</th>
      <th scope="col">Tâche</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Lundi</th>
      <td>Maçonnerie</td>
      <td>Fondations zone B</td>
    </tr>
    <tr>
      <th scope="row">Mardi</th>
      <td>Charpente</td>
      <td>Pré-assemblage poutres</td>
    </tr>
    <tr>
      <th scope="row">Mercredi</th>
      <td>Élec.</td>
      <td>Passage gaines RDC</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3">Mise à jour : 12/10, sujet à changement si pluie (évidemment ).</td>
    </tr>
  </tfoot>
</table>

Planning chantier – Semaine 42
Jour	Équipe	Tâche
Lundi	Maçonnerie	Fondations zone B
Mardi	Charpente	Pré-assemblage poutres
Mercredi	Élec.	Passage gaines RDC
Mise à jour : 12/10, sujet à changement si pluie (évidemment ).

Astuces rapides

<caption> = titre du tableau (utile pour l’accessibilité et la compréhension)
Ajoute scope="col" ou scope="row" sur tes <th> pour aider les lecteurs d’écran
Évite de faire de la mise en forme en HTML : stylise tout en CSS (zebra, bordures, alignements)
Pour de gros volumes de données, pense tri/recherche côté JS (table triable = bonheur utilisateur)

Tableaux

Astuces rapides

Verifie tes acquis

Valide et sauvegarde ce chapitre