Le tableau HTML
Un tableau permet d’afficher des données organisées en lignes et en colonnes : un tarif, un planning, un comparatif de produits, etc. En HTML, cette structure repose sur trois balises principales.
<table>: le conteneur global du tableau.<tr>(table row) : une ligne du tableau.<td>(table data) : une cellule de contenu, à l’intérieur d’une ligne.
Important : un tableau sert à afficher des données tabulaires (qui ont naturellement un sens en lignes/colonnes). Ce n’est pas un outil de mise en page. Pour organiser visuellement une page (colonnes, alignements), on utilise Flexbox, comme vu dans les chapitres précédents.
Structure de base
<table>
<tr>
<td>Ligne 1, cellule 1</td>
<td>Ligne 1, cellule 2</td>
</tr>
<tr>
<td>Ligne 2, cellule 1</td>
<td>Ligne 2, cellule 2</td>
</tr>
</table>
Chaque <tr> est une ligne. À l’intérieur, chaque <td> est une cellule. Le nombre de <td> par ligne détermine le nombre de colonnes.
Les en-têtes avec <th>
Pour indiquer qu’une cellule est un titre de colonne (et non une donnée), on remplace <td> par <th> (table header). Par défaut, le navigateur l’affiche en gras et centré — mais surtout, ça donne du sens au tableau pour les lecteurs d’écran.
<table>
<tr>
<th>Forfait</th>
<th>Prix</th>
</tr>
<tr>
<td>Essentiel</td>
<td>9,99 €</td>
</tr>
</table>
Structurer avec <thead> et <tbody>
Pour un tableau plus lisible et mieux structuré, on sépare généralement l’en-tête du corps du tableau avec deux balises sémantiques supplémentaires :
<thead>: regroupe la ou les lignes d’en-tête.<tbody>: regroupe les lignes de contenu.
<table>
<thead>
<tr>
<th>Forfait</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<td>Essentiel</td>
<td>9,99 €</td>
</tr>
<tr>
<td>Confort</td>
<td>19,99 €</td>
</tr>
</tbody>
</table>
Note : ces balises sont facultatives pour qu’un tableau fonctionne, mais recommandées pour la sémantique et le style CSS (on peut cibler thead ou tbody séparément).
Un peu de style CSS
Par défaut, un tableau HTML est très brut (pas de bordures visibles, cellules espacées). Voici les propriétés de base pour lui donner un rendu propre.
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
thead {
background-color: #1e1e1e;
color: #fff;
}
tbody tr:nth-child(even) {
background-color: #f5f5f5;
}
Explication :
border-collapse: collapse;: fusionne les bordures des cellules voisines en une seule ligne, au lieu de doubler les traits.thead: on cible l’en-tête pour lui donner un fond distinct.tbody tr:nth-child(even): applique un fond alterné (une ligne sur deux), un classique appelé zebra striping, qui facilite la lecture d’un tableau avec beaucoup de lignes.
Exercice
Avant de vous lancer, voici à quoi va ressembler le résultat final, en langage naturel :
Le tableau aura deux colonnes côte à côte. En haut, une ligne d’en-tête avec un fond sombre et du texte blanc, portant les titres des deux colonnes : « Jour » à gauche et « Activité » à droite. En dessous, cinq lignes empilées verticalement, une par jour de la semaine du lundi au vendredi. Sur chaque ligne, le nom du jour apparaît dans la colonne de gauche, et l’activité correspondante dans la colonne de droite. Pour faciliter la lecture, une ligne sur deux aura un léger fond gris clair, l’autre restant blanche (l’effet « zébré » vu plus haut). Chaque cellule est entourée d’une fine bordure grise, avec un peu d’espace intérieur pour que le texte ne touche pas les bords.
Maintenant que vous visualisez le résultat, à vous de le construire :
Créez un tableau présentant un planning de la semaine avec deux colonnes : Jour et Activité.
- Structurez le tableau avec
<thead>et<tbody>. - Ajoutez au moins 5 lignes dans le corps du tableau.
- Appliquez le CSS vu dans ce chapitre (bordures, padding, en-tête coloré, lignes alternées).
Corrigé
⚠️ NE REGARDEZ PAS LA SOLUTION AVANT D’AVOIR ESSAYÉ !
Bloqué ? Cliquez sur le bouton ci-dessous pour afficher le résultat attendu.
