OUJOOD.COM
Tableaux Bootstrap 5 : Les Fondamentaux et la Classe de Base
Les tableaux Bootstrap 5 sont des composants essentiels pour présenter des données structurées de façon lisible et professionnelle sur le web. Grâce au système de classes utilitaires CSS de Bootstrap, un simple tableau HTML se transforme en un composant visuel cohérent, adaptatif et accessible, sans écrire une seule ligne de CSS personnalisé.
La classe fondamentale .table est le point d'entrée obligatoire pour tout tableau Bootstrap 5. Elle applique automatiquement un espacement interne (padding) harmonieux sur chaque cellule <td> et <th>, ainsi que des séparateurs horizontaux subtils entre les lignes grâce à des bordures CSS légères. Ce style de base garantit une présentation sobre, moderne et cohérente avec le design system de Bootstrap, sans surcharger visuellement la page.
Contrairement aux tableaux HTML natifs qui s'affichent sans mise en forme, un tableau avec la classe .table de Bootstrap 5 bénéficie d'un line-height optimisé, d'un espacement vertical généreux et d'une hiérarchie visuelle claire entre l'en-tête (<thead>) et le corps du tableau (<tbody>). Ces améliorations facilitent la lecture et l'analyse des données, notamment dans les tableaux de bord, les listes d'utilisateurs ou les rapports de données.
Exemple de tableau Bootstrap 5 de base — structure HTML minimale
Voici comment créer un tableau Bootstrap 5 basique avec la structure HTML sémantique recommandée. L'exemple ci-dessous illustre l'usage de <thead>, <tbody> et de la classe .table pour un rendu propre dès la première ligne de code :
<!DOCTYPE html> <html lang="fr"> <head> <title>Tableau Bootstrap 5 - Exemple de Base</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5.3 CDN : inclure avant tout CSS personnalisé --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bundle JS Bootstrap (inclut Popper.js pour les composants interactifs) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-4"> <h2>Tableau Bootstrap 5 — Classe de base .table</h2> <p>La classe <strong>.table</strong> ajoute : padding des cellules, bordures horizontales et une typographie cohérente.</p> <!-- La classe .table est OBLIGATOIRE pour activer les styles Bootstrap sur un <table> --> <table class="table"> <!-- <thead> : section des en-têtes — importante pour l'accessibilité (aria) et le SEO --> <thead> <tr> <!-- <th scope="col"> améliore l'accessibilité pour les lecteurs d'écran --> <th scope="col">Prénom</th> <th scope="col">Nom de famille</th> <th scope="col">Email professionnel</th> </tr> </thead> <!-- <tbody> : section des données — chaque <tr> représente un enregistrement --> <tbody> <tr> <td>Jean</td> <td>Dupont</td> <td>jean.dupont@exemple.fr</td> </tr> <tr> <td>Marie</td> <td>Martin</td> <td>marie.martin@exemple.fr</td> </tr> <tr> <td>Julien</td> <td>Bernard</td> <td>julien.bernard@exemple.fr</td> </tr> </tbody> </table> </div> </body> </html>
Tableaux à Bandes Zébrées Bootstrap 5 (Striped Tables)
L'un des moyens les plus efficaces d'améliorer la lisibilité d'un tableau de données dense est l'utilisation du style zébré. La classe .table-striped de Bootstrap 5 applique automatiquement, via la pseudo-classe CSS :nth-of-type(odd), un arrière-plan légèrement teinté sur les lignes impaires du <tbody>, créant ainsi un motif alterné visuellement distinctif sans aucun JavaScript.
Les tableaux striped Bootstrap 5 sont particulièrement adaptés aux cas d'usage suivants : listes d'utilisateurs, tableaux de données financières, rapports analytiques ou tout jeu de données comportant de nombreuses lignes et colonnes. Ce contraste alterné permet à l'œil de suivre naturellement une ligne horizontale sur toute la largeur du tableau, réduisant ainsi les erreurs de lecture et améliorant l'expérience utilisateur (UX).
Nouveauté Bootstrap 5.1+ : la classe .table-striped-columns permet d'appliquer l'effet zébré sur les colonnes plutôt que sur les lignes, offrant une alternative visuelle intéressante pour certains types de tableaux comparatifs.
Exemple : tableau Bootstrap 5 avec rayures alternées (.table-striped)
Pour activer le style zébré, combinez simplement .table et .table-striped sur la balise <table>. Les couleurs s'alternent automatiquement, y compris en mode sombre si vous utilisez data-bs-theme="dark" :
<!-- .table-striped : applique un fond alterné sur les lignes impaires du <tbody> --> <table class="table table-striped"> <thead class="table-dark"> <!-- .table-dark sur <thead> : en-tête sombre pour un contraste fort --> <tr> <th scope="col">#</th> <th scope="col">Prénom</th> <th scope="col">Nom de famille</th> <th scope="col">Email professionnel</th> </tr> </thead> <tbody> <!-- Ligne 1 (impaire) : fond légèrement teinté grâce à :nth-of-type(odd) --> <tr> <th scope="row">1</th> <td>Jean</td> <td>Dupont</td> <td>jean.dupont@exemple.fr</td> </tr> <!-- Ligne 2 (paire) : fond blanc par défaut (contraste avec ligne 1) --> <tr> <th scope="row">2</th> <td>Marie</td> <td>Martin</td> <td>marie.martin@exemple.fr</td> </tr> <!-- Ligne 3 (impaire) : fond teinté à nouveau — alternance automatique --> <tr> <th scope="row">3</th> <td>Julien</td> <td>Bernard</td> <td>julien.bernard@exemple.fr</td> </tr> </tbody> </table> <!-- Variante Bootstrap 5.1+ : zèbre sur les colonnes plutôt que les lignes --> <table class="table table-striped-columns"> <!-- Même structure que ci-dessus, mais l'alternance se fait en colonne --> </table>
Tableaux avec Bordures Complètes Bootstrap 5 (.table-bordered)
Pour délimiter visuellement chaque cellule et renforcer la structure tabulaire, Bootstrap 5 propose la classe .table-bordered. Elle ajoute des bordures sur les quatre côtés du tableau ainsi qu'autour de chaque cellule <td> et <th>, créant une grille visuelle complète.
Cette approche est idéale pour les tableaux comparatifs de produits, les grilles tarifaires ou toute présentation où la séparation explicite des cellules est fonctionnellement nécessaire. La classe .border-primary (ou toute autre classe de couleur Bootstrap) permet de personnaliser la couleur des bordures selon votre charte graphique.
Bootstrap 5 introduit également .table-borderless, l'opposé strict de .table-bordered : cette classe supprime toutes les bordures, y compris les séparateurs horizontaux, pour un rendu épuré, souvent utilisé dans les tableaux intégrés dans des cartes ou des panneaux.
Exemple : tableau Bootstrap 5 avec bordures sur toutes les cellules
L'implémentation ci-dessous montre comment combiner .table-bordered avec une couleur de bordure personnalisée via la classe utilitaire .border-primary. Notez l'usage de scope="row" sur la première colonne pour l'accessibilité :
<!-- .table-bordered : ajoute des bordures sur TOUTES les cellules (4 côtés) --> <table class="table table-bordered"> <thead> <tr> <th scope="col">#</th> <th scope="col">Produit</th> <th scope="col">Catégorie</th> <th scope="col">Prix HT</th> </tr> </thead> <tbody> <!-- scope="row" sur <th> : définit cet élément comme en-tête de ligne (accessibilité) --> <tr> <th scope="row">1</th> <td>Laptop Pro X</td> <td>Informatique</td> <td>1 299 €</td> </tr> <tr> <th scope="row">2</th> <td>Moniteur 27"</td> <td>Périphériques</td> <td>349 €</td> </tr> <tr> <th scope="row">3</th> <td>Clavier mécanique</td> <td>Périphériques</td> <td>89 €</td> </tr> </tbody> <!-- <tfoot> : pied de tableau optionnel, utile pour les totaux ou les légendes --> <tfoot> <tr> <td colspan="3"><strong>Total HT</strong></td> <td><strong>1 737 €</strong></td> </tr> </tfoot> </table> <!-- Variante borderless : supprime toutes les bordures pour un rendu épuré --> <table class="table table-borderless"> <!-- Même structure, rendu sans aucune bordure visible --> </table>
Tableaux Interactifs : Hover, Taille et Classes Contextuelles
Bootstrap 5 propose plusieurs classes supplémentaires pour enrichir l'interactivité et la sémantique visuelle de vos tableaux. La classe .table-hover ajoute un effet de survol (hover state) sur les lignes du <tbody> : un fond coloré s'affiche lorsque l'utilisateur passe la souris sur une ligne, améliorant considérablement la navigation visuelle dans les tableaux longs.
Pour contrôler la densité d'affichage, Bootstrap offre deux classes de taille : .table-sm réduit le padding des cellules de moitié pour afficher plus de données dans un espace restreint, idéal pour les tableaux de bord compacts ou les interfaces d'administration. À l'inverse, les tableaux standard conservent un padding confortable pour une meilleure lisibilité.
Les classes contextuelles Bootstrap 5 permettent de colorier sémantiquement des lignes ou des cellules en fonction de leur signification : .table-success (vert), .table-danger (rouge), .table-warning (jaune), .table-info (bleu), .table-secondary (gris). Ces classes s'appliquent directement sur les balises <tr>, <td> ou <th> pour signaler des statuts, des alertes ou des catégories de données.
Exemple : tableau Bootstrap 5 hover, compact et avec classes contextuelles
Cet exemple pratique illustre la combinaison de .table-hover avec des classes contextuelles sur les lignes pour créer un tableau de suivi de statuts coloré et interactif :
<!-- .table-hover : ajoute un fond au survol de chaque ligne <tr> --> <!-- .table-sm : réduit le padding pour une densité d'affichage plus élevée --> <table class="table table-hover table-sm table-bordered"> <thead class="table-dark"> <tr> <th scope="col">Commande</th> <th scope="col">Client</th> <th scope="col">Montant</th> <th scope="col">Statut</th> </tr> </thead> <tbody> <!-- .table-success : fond vert — signale une ligne validée ou réussie --> <tr class="table-success"> <th scope="row">#1042</th> <td>Alice Moreau</td> <td>245,00 €</td> <td>✅ Livré</td> </tr> <!-- .table-warning : fond jaune — signale un état d'attente ou à vérifier --> <tr class="table-warning"> <th scope="row">#1043</th> <td>Paul Lefebvre</td> <td>89,50 €</td> <td>⏳ En cours</td> </tr> <!-- .table-danger : fond rouge — signale une erreur ou un problème critique --> <tr class="table-danger"> <th scope="row">#1044</th> <td>Lucie Blanc</td> <td>512,00 €</td> <td>❌ Annulé</td> </tr> <!-- .table-info : fond bleu — signale une information neutre ou en traitement --> <tr class="table-info"> <th scope="row">#1045</th> <td>Marc Rousseau</td> <td>178,00 €</td> <td>ℹ️ Expédié</td> </tr> </tbody> </table>
Tableaux Responsives Bootstrap 5 (.table-responsive)
L'un des défis majeurs du design responsive pour les tableaux HTML est la gestion des débordements horizontaux sur mobile. Bootstrap 5 résout ce problème avec la classe .table-responsive à appliquer sur un <div> englobant le tableau. Elle active un défilement horizontal (overflow-x: auto) lorsque le tableau est plus large que son conteneur, évitant ainsi tout débordement ou mise en page cassée sur les écrans étroits.
Bootstrap propose également des variantes responsives par point de rupture (breakpoint) pour un contrôle précis : .table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl et .table-responsive-xxl. Le tableau devient scrollable uniquement en dessous du breakpoint spécifié, et s'affiche normalement au-delà. Par exemple, .table-responsive-md rend le tableau scrollable uniquement sur les écrans inférieurs à 768px.
Exemple : tableau responsive Bootstrap 5 avec défilement horizontal
La technique recommandée consiste à envelopper le tableau dans un <div class="table-responsive">. Le tableau conserve toutes ses colonnes sur mobile, avec un scroll horizontal natif et fluide :
<!-- Envelopper le tableau dans .table-responsive active le scroll horizontal sur mobile --> <div class="table-responsive"> <!-- Le tableau lui-même conserve toutes ses classes habituelles --> <table class="table table-striped table-bordered table-hover"> <thead class="table-primary"> <!-- .table-primary sur thead : fond bleu primaire Bootstrap pour l'en-tête --> <tr> <th scope="col">ID</th> <th scope="col">Nom complet</th> <th scope="col">Rôle</th> <th scope="col">Département</th> <th scope="col">Localisation</th> <th scope="col">Statut</th> </tr> </thead> <tbody> <tr> <th scope="row">001</th> <td>Alice Moreau</td> <td>Développeuse Full-Stack</td> <td>Ingénierie</td> <td>Paris, France</td> <td><span class="badge bg-success">Actif</span></td> </tr> <tr> <th scope="row">002</th> <td>Paul Lefebvre</td> <td>Chef de projet Agile</td> <td>Management</td> <td>Lyon, France</td> <td><span class="badge bg-warning text-dark">En congé</span></td> </tr> <tr> <th scope="row">003</th> <td>Lucie Blanc</td> <td>Designer UX/UI</td> <td>Produit</td> <td>Bordeaux, France</td> <td><span class="badge bg-danger">Inactif</span></td> </tr> </tbody> </table> </div> <!-- Variante par breakpoint : scrollable seulement sous 768px (md) --> <div class="table-responsive-md"> <table class="table"><!-- ...contenu du tableau... --></table> </div>
Récapitulatif des Classes Bootstrap 5 pour les Tableaux
Bootstrap 5 offre un écosystème complet de classes utilitaires pour les tableaux. Voici un récapitulatif rapide de toutes les classes disponibles, leurs effets et cas d'usage recommandés en 2026 :
<!-- Tableau récapitulatif de toutes les classes Bootstrap 5 pour les <table> -->
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-sm">
<thead class="table-dark">
<tr>
<th>Classe Bootstrap 5</th>
<th>Effet appliqué</th>
<th>Cas d'usage idéal</th>
</tr>
</thead>
<tbody>
<tr><td>.table</td><td>Style de base : padding + bordures horizontales</td><td>Tout tableau Bootstrap — classe obligatoire</td></tr>
<tr><td>.table-striped</td><td>Fond alterné sur les lignes impaires</td><td>Listes longues, tableaux de données</td></tr>
<tr><td>.table-striped-columns</td><td>Fond alterné sur les colonnes impaires</td><td>Tableaux comparatifs</td></tr>
<tr><td>.table-bordered</td><td>Bordures sur toutes les cellules (4 côtés)</td><td>Grilles tarifaires, specs techniques</td></tr>
<tr><td>.table-borderless</td><td>Supprime toutes les bordures</td><td>Tableaux dans cartes / panneaux</td></tr>
<tr><td>.table-hover</td><td>Fond coloré au survol de chaque ligne</td><td>Tableaux interactifs, dashboards</td></tr>
<tr><td>.table-sm</td><td>Réduit le padding des cellules de 50%</td><td>Interfaces compactes, administration</td></tr>
<tr><td>.table-dark</td><td>Fond sombre, texte clair (mode nuit)</td><td>Thèmes sombres, dark mode</td></tr>
<tr><td>.table-responsive</td><td>Scroll horizontal mobile (div englobant)</td><td>Tableaux larges — recommandé</td></tr>
<tr><td>.table-success / danger / warning</td><td>Coloration contextuelle sémantique</td><td>Statuts, alertes, catégories</td></tr>
</tbody>
</table>
</div>
Par carabde | Mis à jour le 17 février 2026