En-têtes et organisation avancée
- 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.
Vous êtes développeur web junior dans une agence marketing. Votre chef vous demande de créer des tableaux de données pour le site d'un client restaurateur.
Votre défi
Les tableaux doivent présenter clairement les menus, prix et horaires avec une structure professionnelle accessible aux malvoyants
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.
Quel élément HTML utilise-t-on pour créer une cellule d'en-tête dans un tableau ?