En-têtes et organisation avancée
En-têtes et organisation avancée des tableaux HTML
- 1Les éléments th, thead, tbody et tfoot structurent professionnellement vos tableaux HTML
- 2Cette organisation améliore l'accessibilité et facilite la maintenance du code
- 3Une structure claire permet aux outils d'assistance et aux moteurs de recherche de mieux comprendre vos données
Introduction
Imaginez que vous travaillez pour une entreprise e-commerce et devez présenter les ventes trimestrielles sur le site web. Un simple tableau avec des cellules basiques ne suffira pas - vous avez besoin d'une structure professionnelle avec des en-têtes clairs, des sections distinctes et une organisation logique que tous pourront comprendre facilement.
Structure hiérarchique d'un tableau HTML professionnel
Voici comment organiser logiquement les différentes parties d'un tableau HTML :
Les éléments d'en-tête : <th>
L'élément <th> (table header) définit une cellule d'en-tête qui décrit le contenu des colonnes ou lignes :
1<table>
2 <tr>
3 <th>Produit</th>
4 <th>Prix</th>
5 <th>Stock</th>
6 <th>Statut</th>
7 </tr>
8 <tr>
9 <td>Laptop Dell</td>
10 <td>899€</td>
11 <td>15</td>
12 <td>Disponible</td>
13 </tr>
14 <tr>
15 <td>iPhone 15</td>
16 <td>1099€</td>
17 <td>8</td>
18 <td>Rupture</td>
19 </tr>
20</table>💡 À retenir : Les cellules
<th>sont automatiquement mises en gras et centrées par défaut, contrairement aux cellules<td>.
Organisation avec <thead>, <tbody> et <tfoot>
Ces trois éléments structurent sémantiquement votre tableau :
| Élément | Rôle | Contenu typique |
|---|---|---|
<thead> | En-tête du tableau | Titres de colonnes, libellés |
<tbody> | Corps principal | Données principales |
<tfoot> | Pied du tableau | Totaux, résumés, notes |
Exemple complet structuré
1<table>
2 <thead>
3 <tr>
4 <th>Mois</th>
5 <th>Ventes</th>
6 <th>Coûts</th>
7 <th>Bénéfice</th>
8 </tr>
9 </thead>
10
11 <tbody>
12 <tr>
13 <td>Janvier</td>
14 <td>15 000€</td>
15 <td>8 000€</td>
16 <td>7 000€</td>
17 </tr>
18 <tr>
19 <td>Février</td>
20 <td>18 500€</td>
21 <td>9 200€</td>
22 <td>9 300€</td>
23 </tr>
24 <tr>
25 <td>Mars</td>
26 <td>22 100€</td>
27 <td>11 500€</td>
28 <td>10 600€</td>
29 </tr>
30 </tbody>
31
32 <tfoot>
33 <tr>
34 <th>Total Q1</th>
35 <td>55 600€</td>
36 <td>28 700€</td>
37 <td>26 900€</td>
38 </tr>
39 </tfoot>
40</table>Le saviez-vous ?
L'ordre d'écriture dans le HTML peut être <thead>, <tfoot>, puis <tbody> - le navigateur affichera automatiquement le tfoot en bas, même s'il apparaît avant tbody dans le code !
— Spécification HTML5 du W3C
Attributs avancés pour l'accessibilité
L'attribut scope
Précise le rôle de l'en-tête :
1<table>
2 <thead>
3 <tr>
4 <th scope="col">Ville</th>
5 <th scope="col">Population</th>
6 <th scope="col">Superficie</th>
7 </tr>
8 </thead>
9 <tbody>
10 <tr>
11 <th scope="row">Paris</th>
12 <td>2 165 423</td>
13 <td>105 km²</td>
14 </tr>
15 <tr>
16 <th scope="row">Lyon</th>
17 <td>516 092</td>
18 <td>47,87 km²</td>
19 </tr>
20 </tbody>
21</table>L'attribut headers
Lie explicitement les cellules à leurs en-têtes :
1<table>
2 <thead>
3 <tr>
4 <th id="produit">Produit</th>
5 <th id="prix-ht">Prix HT</th>
6 <th id="tva">TVA</th>
7 <th id="prix-ttc">Prix TTC</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td headers="produit">Ordinateur</td>
13 <td headers="prix-ht">800€</td>
14 <td headers="tva">160€</td>
15 <td headers="prix-ttc">960€</td>
16 </tr>
17 </tbody>
18</table>⚠️ Attention : N'oubliez pas les attributs d'accessibilité ! Ils sont essentiels pour les utilisateurs de lecteurs d'écran.
Exemple pratique : Tableau de planning
1<table>
2 <caption>Planning des formations - Semaine du 15 janvier</caption>
3
4 <thead>
5 <tr>
6 <th scope="col">Horaire</th>
7 <th scope="col">Lundi</th>
8 <th scope="col">Mardi</th>
9 <th scope="col">Mercredi</th>
10 <th scope="col">Jeudi</th>
11 <th scope="col">Vendredi</th>
12 </tr>
13 </thead>
14
15 <tbody>
16 <tr>
17 <th scope="row">9h-12h</th>
18 <td>HTML Bases</td>
19 <td>CSS Flexbox</td>
20 <td>JavaScript DOM</td>
21 <td>React Intro</td>
22 <td>Projet Final</td>
23 </tr>
24 <tr>
25 <th scope="row">14h-17h</th>
26 <td>HTML Avancé</td>
27 <td>CSS Grid</td>
28 <td>JavaScript ES6</td>
29 <td>React Hooks</td>
30 <td>Présentation</td>
31 </tr>
32 </tbody>
33
34 <tfoot>
35 <tr>
36 <td colspan="6">
37 <small>* Toutes les formations incluent 15min de pause</small>
38 </td>
39 </tr>
40 </tfoot>
41</table>🎯 En pratique : Utilisez
<caption>pour donner un titre descriptif à votre tableau - c'est excellent pour l'accessibilité et le référencement !
Avantages de cette structure
💡 À retenir : Un tableau bien structuré avec thead, tbody, tfoot et des en-têtes th appropriés est la base d'une expérience utilisateur réussie et d'un code maintenable.