Structure de base d'un tableau
Structure de base d'un tableau
- 1Les tableaux HTML utilisent trois balises principales : <table> pour le conteneur, <tr> pour les lignes et <td> pour les cellules
- 2Chaque ligne (<tr>) contient une ou plusieurs cellules (<td>) qui forment les colonnes du tableau
- 3La structure logique suit toujours l'ordre : Table → Rangées (rows) → Cellules de données, comme un quadrillage organisé
Introduction
Les tableaux HTML sont essentiels pour organiser et présenter des données de manière structurée. Imaginez que vous devez créer un catalogue de produits pour un site e-commerce : vous avez besoin d'aligner proprement les noms, prix, et descriptions. C'est exactement là qu'interviennent les tableaux !
L'architecture d'un tableau HTML
Visualisation de la structure
Les trois balises fondamentales
| Balise | Rôle | Description | Obligatoire |
|---|---|---|---|
<table> | Conteneur | Délimite l'ensemble du tableau | ✅ Oui |
<tr> | Ligne (Table Row) | Définit une rangée horizontale | ✅ Oui |
<td> | Cellule (Table Data) | Contient les données d'une case | ✅ Oui |
Premier exemple concret
Créons ensemble un tableau simple listant des fruits et leurs couleurs :
1<table>
2 <tr>
3 <td>Pomme</td>
4 <td>Rouge</td>
5 </tr>
6 <tr>
7 <td>Banane</td>
8 <td>Jaune</td>
9 </tr>
10 <tr>
11 <td>Kiwi</td>
12 <td>Vert</td>
13 </tr>
14</table>Analyse étape par étape
<table>: On ouvre le conteneur principal- Première ligne
<tr>:<td>Pomme</td>→ première cellule de la ligne<td>Rouge</td>→ deuxième cellule de la ligne
- Deuxième ligne
<tr>: même structure avec Banane/Jaune - Troisième ligne
<tr>: même structure avec Kiwi/Vert </table>: On ferme le conteneur
💡 À retenir : Chaque ligne doit contenir le même nombre de cellules pour que le tableau soit bien aligné.
Exemple plus complexe
Voici un tableau avec plus de colonnes, représentant un inventaire de produits :
1<table>
2 <tr>
3 <td>Produit</td>
4 <td>Prix</td>
5 <td>Stock</td>
6 <td>Catégorie</td>
7 </tr>
8 <tr>
9 <td>Ordinateur portable</td>
10 <td>899€</td>
11 <td>15</td>
12 <td>Informatique</td>
13 </tr>
14 <tr>
15 <td>Souris sans fil</td>
16 <td>29€</td>
17 <td>50</td>
18 <td>Accessoires</td>
19 </tr>
20 <tr>
21 <td>Écran 24 pouces</td>
22 <td>199€</td>
23 <td>8</td>
24 <td>Moniteurs</td>
25 </tr>
26</table>Le saviez-vous ?
La balise <table> a été introduite en HTML 2.0 en 1995, mais elle était initialement destinée uniquement à présenter des données tabulaires, pas à créer des mises en page (une pratique aujourd'hui obsolète grâce à CSS Grid et Flexbox).
— Spécification HTML du W3C
Règles importantes à respecter
⚠️ Attention : Toutes les lignes d'un tableau doivent contenir le même nombre de cellules, sinon l'alignement sera compromis.
🎯 En pratique : Utilisez l'indentation dans votre code pour mieux visualiser la structure : chaque
<tr>au même niveau, chaque<td>indenté à l'intérieur.
Bonnes pratiques d'écriture
1<!-- ✅ CORRECT : Structure claire et indentée -->
2<table>
3 <tr>
4 <td>Donnée 1</td>
5 <td>Donnée 2</td>
6 </tr>
7 <tr>
8 <td>Donnée 3</td>
9 <td>Donnée 4</td>
10 </tr>
11</table>
12
13<!-- ❌ INCORRECT : Structure confuse -->
14<table><tr><td>Donnée 1</td><td>Donnée 2</td></tr><tr><td>Donnée 3</td><td>Donnée 4</td></tr></table>Visualisation du rendu
Voici comment votre navigateur interprétera le code HTML :
| Produit | Prix | Stock | Catégorie |
|---|---|---|---|
| Ordinateur portable | 899€ | 15 | Informatique |
| Souris sans fil | 29€ | 50 | Accessoires |
| Écran 24 pouces | 199€ | 8 | Moniteurs |
💡 À retenir : Par défaut, les tableaux HTML n'ont pas de bordures visibles. Il faudra ajouter du CSS pour les styliser (ce sera vu dans une leçon ultérieure).
Points clés à mémoriser
- Structure hiérarchique : Table > Ligne > Cellule
- Cohérence : Même nombre de cellules par ligne
- Lisibilité : Code indenté pour faciliter la maintenance
- Simplicité : Commencez toujours par la structure de base avant d'ajouter des fonctionnalités