La balise <table> est l'élément fondamental pour créer des tableaux de données en HTML. Que vous souhaitiez afficher des statistiques, comparer des produits ou présenter des informations structurées, les tableaux HTML restent un outil incontournable du développement web moderne.
Si vous débutez en HTML et souhaitez maîtriser la création de tableaux et bien d'autres éléments essentiels, notre formation HTML vous accompagnera pas à pas dans votre apprentissage.
Les tableaux HTML sont conçus pour afficher des données tabulaires, pas pour la mise en page ! Utilisez CSS Grid ou Flexbox pour le layout de vos pages 😊
Définition et syntaxe de la balise table
Qu'est-ce que la balise table ?
La balise <table> définit un tableau en HTML. Elle sert de conteneur principal pour organiser des données en lignes et colonnes. Un tableau bien structuré améliore la lisibilité de vos informations et facilite leur compréhension par les utilisateurs et les moteurs de recherche.
Un tableau HTML complet se compose de plusieurs éléments travaillant ensemble :
<table>: le conteneur principal du tableau<thead>: l'en-tête du tableau (optionnel mais recommandé)<tbody>: le corps du tableau contenant les données<tfoot>: le pied du tableau (optionnel)<tr>: une ligne du tableau (table row)<th>: une cellule d'en-tête (table header)<td>: une cellule de données (table data)
Syntaxe de base
Voici la structure minimale d'un tableau HTML :
<table>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
</table>Cette structure crée un tableau simple avec une ligne d'en-tête et une ligne de données.
Structure complète recommandée
Pour un tableau sémantiquement correct et accessible, nous vous recommandons d'utiliser les éléments de groupement :
<table>
<caption>Liste des formations Believemy</caption>
<thead>
<tr>
<th scope="col">Formation</th>
<th scope="col">Durée</th>
<th scope="col">Niveau</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML & CSS</td>
<td>20 heures</td>
<td>Débutant</td>
</tr>
<tr>
<td>JavaScript</td>
<td>35 heures</td>
<td>Intermédiaire</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>2 formations</td>
</tr>
</tfoot>
</table>L'élément <caption> fournit un titre descriptif au tableau, essentiel pour l'accessibilité.
Attributs de la balise table
Attributs globaux
La balise <table> accepte tous les attributs globaux HTML, notamment :
| Attribut | Description | Exemple |
|---|---|---|
id | Identifiant unique du tableau | id="tableau-formations" |
class | Classes CSS pour le style | class="table-responsive" |
style | Styles CSS inline | style="width: 100%;" |
title | Info-bulle au survol | title="Données 2024" |
Attributs obsolètes à éviter
Certains attributs étaient utilisés dans les anciennes versions de HTML mais sont désormais obsolètes :
Les attributs border, cellpadding, cellspacing, width, bgcolor et align sont dépréciés. Utilisez CSS pour styliser vos tableaux !
Voici comment remplacer ces anciens attributs par du CSS moderne :
/* Remplace border="1" */
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #333;
}
/* Remplace cellpadding="10" */
th, td {
padding: 10px;
}
/* Remplace cellspacing="0" */
table {
border-spacing: 0;
}
/* Remplace width="100%" */
table {
width: 100%;
}
/* Remplace bgcolor */
table {
background-color: #f5f5f5;
}
Exemples pratiques de tableaux HTML
Tableau simple de données
Commençons par un exemple concret : un tableau listant des apprenants et leurs scores sur la plateforme Believemy :
<table>
<caption>Progression des apprenants - Semaine 1</caption>
<thead>
<tr>
<th scope="col">Apprenant</th>
<th scope="col">Formation</th>
<th scope="col">Progression</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marie Dupont</td>
<td>HTML & CSS</td>
<td>75%</td>
<td>92/100</td>
</tr>
<tr>
<td>Pierre Martin</td>
<td>JavaScript</td>
<td>45%</td>
<td>88/100</td>
</tr>
<tr>
<td>Sophie Bernard</td>
<td>React</td>
<td>90%</td>
<td>95/100</td>
</tr>
</tbody>
</table>Notez l'utilisation de scope="col" sur les cellules d'en-tête, qui indique aux lecteurs d'écran que ces en-têtes s'appliquent aux colonnes.
Tableau avec fusion de cellules
Les attributs colspan et rowspan permettent de fusionner des cellules horizontalement ou verticalement :
<table>
<caption>Planning hebdomadaire des cours</caption>
<thead>
<tr>
<th scope="col">Horaire</th>
<th scope="col">Lundi</th>
<th scope="col">Mardi</th>
<th scope="col">Mercredi</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">9h - 12h</th>
<td rowspan="2">Formation HTML</td>
<td>Formation CSS</td>
<td>Libre</td>
</tr>
<tr>
<th scope="row">14h - 17h</th>
<td colspan="2">Projet pratique</td>
</tr>
</tbody>
</table>Dans cet exemple :
rowspan="2"fait que "Formation HTML" s'étend sur deux lignescolspan="2"fait que "Projet pratique" s'étend sur deux colonnesscope="row"indique que les cellules d'horaire sont des en-têtes de ligne
Tableau responsive avec CSS
Les tableaux peuvent poser problème sur mobile. Voici une technique pour les rendre responsives :
<div class="table-container">
<table class="table-responsive">
<thead>
<tr>
<th>Nom</th>
<th>Email</th>
<th>Téléphone</th>
<th>Ville</th>
<th>Inscription</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Nom">Jean Believemy</td>
<td data-label="Email">jean@example.com</td>
<td data-label="Téléphone">01 23 45 67 89</td>
<td data-label="Ville">Paris</td>
<td data-label="Inscription">15/01/2024</td>
</tr>
</tbody>
</table>
</div>/* Conteneur scrollable horizontalement */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive {
width: 100%;
border-collapse: collapse;
}
.table-responsive th,
.table-responsive td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* Alternative : affichage en carte sur mobile */
@media screen and (max-width: 600px) {
.table-responsive thead {
display: none;
}
.table-responsive tr {
display: block;
margin-bottom: 1rem;
border: 1px solid #ddd;
}
.table-responsive td {
display: flex;
justify-content: space-between;
padding: 10px;
}
.table-responsive td::before {
content: attr(data-label);
font-weight: bold;
}
}Cette technique utilise les attributs data-label pour afficher les en-têtes sur mobile.
Accessibilité des tableaux HTML
Pourquoi l'accessibilité est essentielle
Les tableaux mal structurés sont particulièrement difficiles à naviguer pour les utilisateurs de lecteurs d'écran. Un tableau accessible permet à tous les utilisateurs de comprendre les relations entre les données.
Bonnes pratiques d'accessibilité
Voici les règles essentielles pour créer des tableaux accessibles :
- Utilisez toujours
<caption>: décrit le contenu du tableau - Utilisez
<th>pour les en-têtes : jamais<td>avec du gras - Ajoutez l'attribut
scope:colpour les colonnes,rowpour les lignes - Utilisez
<thead>,<tbody>,<tfoot>: structure sémantique claire - Évitez les tableaux imbriqués : complexité inutile
<!-- Exemple de tableau parfaitement accessible -->
<table aria-describedby="table-desc">
<caption>
Tarifs des formations Believemy
<span id="table-desc" class="sr-only">
Tableau comparatif des prix selon le niveau et la durée
</span>
</caption>
<thead>
<tr>
<th scope="col">Formation</th>
<th scope="col">Niveau</th>
<th scope="col">Durée</th>
<th scope="col">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML Fondamentaux</th>
<td>Débutant</td>
<td>10 heures</td>
<td>Gratuit</td>
</tr>
<tr>
<th scope="row">CSS Avancé</th>
<td>Intermédiaire</td>
<td>15 heures</td>
<td>49€</td>
</tr>
</tbody>
</table>
Attributs ARIA pour tableaux complexes
Pour les tableaux avec des en-têtes complexes, utilisez les attributs id et headers :
<table>
<thead>
<tr>
<th id="nom">Nom</th>
<th id="q1">T1 2024</th>
<th id="q2">T2 2024</th>
</tr>
</thead>
<tbody>
<tr>
<th id="marie" headers="nom">Marie</th>
<td headers="marie q1">150</td>
<td headers="marie q2">180</td>
</tr>
</tbody>
</table>L'attribut headers liste les identifiants des cellules d'en-tête associées.
Styliser les tableaux avec CSS
Styles de base recommandés
Voici une base CSS solide pour styliser vos tableaux :
/* Reset et base */
table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.95rem;
}
/* En-têtes */
thead {
background-color: #2563eb;
color: white;
}
th {
padding: 1rem;
text-align: left;
font-weight: 600;
}
/* Cellules */
td {
padding: 0.875rem 1rem;
border-bottom: 1px solid #e5e7eb;
}
/* Alternance de couleurs */
tbody tr:nth-child(even) {
background-color: #f9fafb;
}
/* Effet de survol */
tbody tr:hover {
background-color: #eff6ff;
}
/* Pied de tableau */
tfoot {
background-color: #f3f4f6;
font-weight: 600;
}
Tableau avec bordures arrondies
Pour obtenir des bordures arrondies sur un tableau, nous devons utiliser une technique spécifique :
table {
border-collapse: separate;
border-spacing: 0;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
th:first-child {
border-top-left-radius: 8px;
}
th:last-child {
border-top-right-radius: 8px;
}
tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}Utilisez border-collapse: separate pour permettre les bordures arrondies, puis border-spacing: 0 pour supprimer l'espace entre les cellules.
Erreurs fréquentes à éviter
Utiliser les tableaux pour la mise en page
C'est l'erreur la plus courante et la plus problématique :
<!-- ❌ MAUVAIS : tableau utilisé pour le layout -->
<table>
<tr>
<td><nav>Menu...</nav></td>
<td><main>Contenu...</main></td>
<td><aside>Sidebar...</aside></td>
</tr>
</table>
<!-- ✅ BON : utiliser CSS Grid ou Flexbox -->
<div class="layout">
<nav>Menu...</nav>
<main>Contenu...</main>
<aside>Sidebar...</aside>
</div>
Oublier les en-têtes sémantiques
<!-- ❌ MAUVAIS : en-têtes avec <td> et du gras -->
<table>
<tr>
<td><strong>Nom</strong></td>
<td><strong>Âge</strong></td>
</tr>
</table>
<!-- ✅ BON : utiliser <th> -->
<table>
<thead>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
</thead>
</table>
Tableaux trop larges sans gestion responsive
<!-- ❌ MAUVAIS : tableau avec beaucoup de colonnes sans wrapper -->
<table>...15 colonnes...</table>
<!-- ✅ BON : conteneur avec scroll horizontal -->
<div style="overflow-x: auto;">
<table>...15 colonnes...</table>
</div>
Tableaux et SEO
Comment Google interprète les tableaux
Les moteurs de recherche peuvent extraire et afficher les données de vos tableaux directement dans les résultats de recherche. Pour optimiser vos tableaux pour le SEO :
- Utilisez des en-têtes descriptifs : Google utilise les
<th>pour comprendre la structure - Ajoutez un
<caption>pertinent : aide à comprendre le contexte - Structurez correctement les données :
<thead>,<tbody>,<tfoot> - Évitez les images de texte : le texte dans les tableaux est indexable
Compatibilité navigateurs
La balise <table> et ses éléments associés bénéficient d'une excellente compatibilité :
| Navigateur | Version minimale | Support |
|---|---|---|
| Chrome | 1.0 | ✅ Complet |
| Firefox | 1.0 | ✅ Complet |
| Safari | 1.0 | ✅ Complet |
| Edge | 12 | ✅ Complet |
| Opera | 7.0 | ✅ Complet |
| Internet Explorer | 4.0 | ✅ Complet |
Les tableaux HTML sont supportés par tous les navigateurs depuis leurs premières versions.
Questions fréquentes sur la balise table
Quelle est la différence entre <th> et <td> ?
La balise <th> (table header) représente une cellule d'en-tête qui décrit le contenu de sa colonne ou de sa ligne. Elle est automatiquement mise en gras et centrée par défaut. La balise <td> (table data) contient les données standard du tableau. Utilisez toujours <th> pour les en-têtes afin d'améliorer l'accessibilité et la sémantique de votre tableau.
Comment fusionner des cellules dans un tableau HTML ?
Utilisez l'attribut colspan pour fusionner des cellules horizontalement (sur plusieurs colonnes) et rowspan pour fusionner verticalement (sur plusieurs lignes). Par exemple, <td colspan="3"> crée une cellule qui s'étend sur 3 colonnes, tandis que <td rowspan="2"> crée une cellule qui s'étend sur 2 lignes.
Peut-on utiliser des tableaux pour la mise en page d'un site ?
Non, cette pratique est fortement déconseillée et considérée comme obsolète depuis de nombreuses années. Les tableaux sont conçus uniquement pour afficher des données tabulaires. Pour la mise en page, utilisez les technologies CSS modernes comme Flexbox ou CSS Grid, qui offrent plus de flexibilité et sont bien meilleures pour l'accessibilité et le référencement.
Comment puis-je apprendre HTML et CSS ?
Pour maîtriser HTML, CSS et la création de tableaux professionnels, nous vous recommandons de suivre notre formation HTML en 2026. Cette formation vous accompagnera pas à pas dans l'apprentissage des fondamentaux jusqu'aux techniques avancées, avec des exercices pratiques et des projets concrets.