OUJOOD.COM
À quoi sert la balise <table> en HTML ?
La balise <table> est un conteneur de données tabulaires : tarifs, horaires, comparatifs, résultats sportifs. Elle ne s'utilise pas seule — elle regroupe un ensemble de balises qui définissent les lignes, les colonnes et les zones sémantiques du tableau.
En résumé : une <table> contient des <tr> (lignes), chaque ligne contient des <td> (cellules de données) ou des <th> (cellules d'en-tête). Trois balises optionnelles — <thead>, <tbody> et <tfoot> — découpent le tableau en zones sémantiques lisibles par les moteurs de recherche et les technologies d'assistance.
⚠ Les tableaux HTML servent à afficher des données, pas à mettre en page un site. Pour la mise en page, utilisez CSS Flexbox ou Grid.
Étape 1 — Créer la structure minimale d'un tableau
Le tableau le plus simple contient une ligne (<tr>) et deux cellules (<td>). C'est le point de départ avant d'ajouter en-têtes et zones sémantiques.
<table border="1">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
Résultat attendu :
┌───────────┬───────────┐ │ Cellule 1 │ Cellule 2 │ ├───────────┼───────────┤ │ Cellule 3 │ Cellule 4 │ └───────────┴───────────┘
Le navigateur affiche un tableau de 2 lignes × 2 colonnes avec une bordure de 1 pixel. Sans border="1", le tableau est invisible à l'écran — les cellules existent mais sans séparation visuelle.
Étape 2 — Structurer le tableau avec thead, tbody, tfoot
Séparer le tableau en trois zones — en-tête, corps, pied — n'est pas obligatoire techniquement, mais cette structure sémantique aide Google à comprendre le rôle de chaque partie et améliore l'accessibilité pour les lecteurs d'écran. C'est aussi ce qui permet au corps du tableau de défiler indépendamment de l'en-tête dans certains contextes CSS.
<table cellspacing="3" cellpadding="5" border="1"> <caption>Commandes du mois de juin</caption> <!-- titre affiché au-dessus du tableau --> <thead> <!-- zone d'en-têtes de colonnes --> <tr> <th>Produit</th> <th>Quantité</th> <th>Prix unitaire</th> </tr> </thead> <tbody> <!-- corps du tableau : les données --> <tr> <td>Clavier</td> <td>2</td> <td>45 €</td> </tr> <tr> <td>Souris</td> <td>3</td> <td>20 €</td> </tr> </tbody> <tfoot> <!-- pied de tableau : totaux ou récapitulatif --> <tr> <td>Total</td> <td>5</td> <td>150 €</td> </tr> </tfoot> </table>
Résultat attendu :
Commandes du mois de juin ┌──────────┬──────────┬───────────────┐ │ Produit │ Quantité │ Prix unitaire │ ← thead (gras, centré par défaut) ├──────────┼──────────┼───────────────┤ │ Clavier │ 2 │ 45 € │ ← tbody │ Souris │ 3 │ 20 € │ ├──────────┼──────────┼───────────────┤ │ Total │ 5 │ 150 € │ ← tfoot └──────────┴──────────┴───────────────┘
Les cellules <th> apparaissent en gras et centrées par défaut. La balise <caption> s'affiche au-dessus du tableau. Le <tfoot> est positionné après le <tbody> dans le code HTML, mais les navigateurs l'affichent toujours en bas.
Étape 3 — Fusionner des cellules avec colspan et rowspan
Parfois une cellule doit occuper plusieurs colonnes (fusion horizontale) ou plusieurs lignes (fusion verticale). colspan fusionne vers la droite, rowspan fusionne vers le bas. Quand vous fusionnez N cellules, supprimez N−1 balises <td> correspondantes — sinon le tableau se décale.
<table border="1" cellpadding="5">
<tr>
<th colspan="3">Rapport trimestriel</th> <!-- occupe 3 colonnes -->
</tr>
<tr>
<th>Mois</th>
<th>Ventes</th>
<th>Objectif</th>
</tr>
<tr>
<td rowspan="2">Avril–Mai</td> <!-- occupe 2 lignes -->
<td>8 200 €</td>
<td>8 000 €</td>
</tr>
<tr>
<!-- pas de td ici : la cellule "Avril–Mai" la remplace -->
<td>9 100 €</td>
<td>8 500 €</td>
</tr>
</table>
Résultat attendu :
┌──────────────────────────────────┐ │ Rapport trimestriel │ ← colspan="3" : occupe toute la largeur ├────────────┬──────────┬──────────┤ │ Mois │ Ventes │ Objectif │ ├────────────┼──────────┼──────────┤ │ │ 8 200 € │ 8 000 € │ │ Avril–Mai ├──────────┼──────────┤ ← rowspan="2" : s'étend sur 2 lignes │ │ 9 100 € │ 8 500 € │ └────────────┴──────────┴──────────┘
⚠ Erreur fréquente : oublier de supprimer le <td> de la deuxième ligne quand on utilise rowspan="2". Le tableau se décale alors d'une colonne — le navigateur ne signale pas d'erreur mais le rendu est cassé.
Étape 4 — Remplacer les attributs obsolètes par du CSS
Les attributs cellpadding, cellspacing, align et bgcolor fonctionnent encore mais sont obsolètes depuis HTML5. Le CSS offre un contrôle plus précis et s'applique à tous les supports. Voici les équivalences directes.
<style>
table {
border-collapse: collapse; /* remplace cellspacing="0" : supprime l'espace entre cellules */
width: 100%; /* remplace width="100%" */
margin: 0 auto; /* remplace align="center" : centre le tableau */
}
th, td {
padding: 8px 12px; /* remplace cellpadding : espace texte ↔ bordure */
border: 1px solid #ccc; /* remplace border="1" */
text-align: left;
}
thead {
background-color: #3a6186; /* remplace bgcolor sur <tr> */
color: #fff;
}
tfoot {
background-color: #f0f0f0;
font-weight: bold;
}
</style>
<table>
<thead>
<tr><th>Produit</th><th>Quantité</th><th>Prix</th></tr>
</thead>
<tbody>
<tr><td>Clavier</td><td>2</td><td>45 €</td></tr>
<tr><td>Souris</td><td>3</td><td>20 €</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>5</td><td>150 €</td></tr>
</tfoot>
</table>
Résultat attendu : un tableau propre, sans bordures doublées, avec un en-tête bleu foncé sur fond blanc et une ligne de total en gris clair. La propriété border-collapse: collapse est celle qui change le plus le rendu — sans elle, chaque cellule garde sa propre bordure et des espaces apparaissent entre les cellules.
Les attributs de la balise <table> : tableau de référence
La colonne DTD indique dans quelle version HTML 4.01/XHTML 1.0 l'attribut est autorisé : S = Strict, T = Transitional, F = Frameset.
cellpadding gère l'espace entre le texte d'une cellule et ses bordures — l'équivalent du padding CSS. cellspacing contrôle l'espace entre les cellules adjacentes, ce que CSS appelle border-spacing. Ces deux attributs restent fonctionnels, mais en HTML5 le CSS est la bonne pratique.
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| align | left center right |
Obsolète. Utilisez margin: auto en CSS pour centrer. Définissait l'alignement du tableau par rapport au texte environnant. |
TF |
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
Obsolète. Utilisez background-color en CSS. Définissait la couleur de fond du tableau. |
TF |
| border | pixels | Épaisseur des bordures extérieures en pixels. La valeur 0 supprime les bordures visibles. |
STF |
| cellpadding | pixels | Espace entre le contenu d'une cellule et sa bordure. Équivaut au padding CSS appliqué à td, th. |
STF |
| cellspacing | pixels | Espace entre deux cellules adjacentes. Équivaut à border-spacing en CSS. Mettre à 0 revient à appliquer border-collapse: collapse. |
STF |
| frame | void, above, below, hsides, lhs, rhs, vsides, box, border | Contrôle quelles bordures extérieures sont visibles. hsides n'affiche que les bordures haute et basse, par exemple. |
STF |
| rules | none, groups, rows, cols, all | Définit quelles bordures intérieures (entre cellules) sont visibles. all affiche toutes les séparations, rows seulement les horizontales. |
STF |
| summary | texte | Description textuelle du tableau pour les technologies d'assistance. Non visible à l'écran. | STF |
| width | pixels ou % | Largeur du tableau. Préférez width en CSS pour un contrôle précis sur tous les écrans. |
STF |
Récapitulatif : le tableau complet en un seul bloc
Ce script rassemble toutes les étapes : structure sémantique, fusion de cellules et CSS moderne. Copiez-collez ce code dans un fichier .html et ouvrez-le dans le navigateur.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tableau HTML complet</title>
<style>
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 12px; border: 1px solid #ccc; text-align: left; }
thead { background-color: #3a6186; color: #fff; }
tfoot { background-color: #f0f0f0; font-weight: bold; }
caption { font-weight: bold; margin-bottom: 6px; }
</style>
</head>
<body>
<table>
<caption>Commandes du mois de juin</caption>
<thead>
<tr>
<th colspan="3">Récapitulatif des ventes</th> <!-- fusion de 3 colonnes -->
</tr>
<tr>
<th>Produit</th>
<th>Quantité</th>
<th>Prix unitaire</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Périphériques</td> <!-- fusion de 2 lignes -->
<td>Clavier (×2)</td>
<td>45 €</td>
</tr>
<tr>
<td>Souris (×3)</td>
<td>20 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td> <!-- fusion colonnes 1 et 2 -->
<td>150 €</td>
</tr>
</tfoot>
</table>
</body>
</html>
Résultat attendu : un tableau avec en-tête bleu foncé sur 3 colonnes, une catégorie "Périphériques" qui s'étend sur 2 lignes, deux lignes de produits et une ligne de total fusionnée. Tout s'affiche sans attributs obsolètes — uniquement du CSS.
Par carabde : 2008 | Mis à jour le 8 juin 2026