Tableaux Bootstrap5

Le composant Table de Bootstrap 5 propose une série de fonctionnalités et de styles, ce qui rend les tableaux plus faciles à créer, responsives et élégants.

Nous pouvons facilement créer des tableaux avec différents styles, une fonctionnalité de tri, une pagination et des mises en page responsives.

Tableaux de base Bootstrap5

Dans Bootstrap 5, la structure de base pour créer un tableau est très simple ; il vous suffit d'utiliser du HTML standard<table>éléments, et ajouteztablela classe.

Bootstrap5 utilise la classe.tablepour définir le style de tableau de base, comme indiqué ci-dessous :

Exemple

<table class="table"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Tableau rayé

En ajoutant.table-stripedclasse, vous verrez<tbody>des rayures sur les lignes à l'intérieur, comme indiqué dans l'exemple ci-dessous :

Exemple

<table class="table table-striped"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Tableau avec bordures

.table-borderedLa classe peut ajouter des bordures au tableau.

Exemple

<table class="table table-bordered"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Tableau avec état de survol

.table-hoverLa classe peut ajouter un effet de survol de la souris (fond gris) à chaque ligne du tableau :

Exemple

<table class="table table-hover"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Tableau sombre

.table-darkLa classe peut ajouter un fond noir au tableau :

Exemple

<table class="table table-dark"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Tableau sombre rayé

En combinant.table-darket.table-stripedclasses, on peut créer un tableau noir rayé :

Exemple

<table class="table table-dark table-striped"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Effet de survol - Tableau sombre

En combinant.table-darket.table-hoverclasses, on peut définir l'effet de survol de la souris sur un tableau sombre :

Exemple

<table class="table table-dark table-hover"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Tableau sans bordures

.table-borderlessLa classe peut créer un tableau sans bordures :

Exemple

<table class="table table-borderless"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Classes de couleurs contextuelles

Grâce aux classes de couleurs contextuelles, vous pouvez définir des couleurs pour les lignes ou les cellules du tableau :

Exemple

<table class="table"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>Défaut</td> <td>Fils de Défaut</td> <td>[email protected]</td> </tr> <tr class="table-primary"> <td>Primaire</td> <td>Joe</td> <td>[email protected]</td> </tr> <tr class="table-success"> <td>Succès</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr class="table-danger"> <td>Danger</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr class="table-info"> <td>Info</td> <td>Dooley</td> <td>[email protected]</td> </tr> <tr class="table-warning"> <td>Avertissement</td> <td>Refs</td> <td>[email protected]</td> </tr> <tr class="table-active"> <td>Actif</td> <td>Activeson</td> <td>[email protected]</td> </tr> <tr class="table-secondary"> <td>Secondaire</td> <td>Secondson</td> <td>[email protected]</td> </tr> <tr class="table-light"> <td>Clair</td> <td>Angie</td> <td>[email protected]</td> </tr> <tr class="table-dark text-dark"> <td>Sombre</td> <td>Bo</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Le tableau ci-dessous liste les descriptions des classes de couleur de tableau :

Nom de classe Description
.table-primary Bleu : Indique une opération importante
.table-success Vert : Indique une opération qu'il est permis d'effectuer
.table-danger Rouge : Indique une opération dangereuse
.table-info Bleu clair : indique que le contenu a changé
.table-warning Orange : indique une opération qui nécessite une attention
.table-active Gris : utilisé pour l'effet de survol de la souris
.table-secondary Gris : indique que le contenu n'est pas très important
.table-light Gris clair : peut être l'arrière-plan des lignes de tableau
.table-dark Gris foncé : peut être l'arrière-plan des lignes de tableau

Couleurs d'en-tête de tableau

Nous pouvons également définir la couleur de l'en-tête du tableau, par exemple.table-darkla classe est utilisée pour ajouter un arrière-plan noir à l'en-tête du tableau,.table-lightla classe est utilisée pour ajouter un arrière-plan gris à l'en-tête du tableau :

Exemple

<table class="table"> <thead class="table-dark"> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> <table class="table"> <thead class="table-light"> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Petit tableau

.table-smLa classe est utilisée pour créer un tableau plus petit en réduisant le padding :

Exemple

<table class="table table-bordered table-sm"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Essayez-le vous-même »

Tableaux responsives

.table-responsiveLa classe est utilisée pour créer des tableaux responsives : lorsque la largeur de l'écran est inférieure à 992px, une barre de défilement horizontale est créée ; si la largeur de la fenêtre d'affichage est supérieure à 992px, un effet différent est affiché (aucune barre de défilement) :

Exemple

<div class="table-responsive"> <table class="table"> <thead> <tr> <th>#</th> <th>Prénom</th> <th>Nom</th> <th>Âge</th> <th>Ville</th> <th>Pays</th> <th>Sexe</th> <th>Exemple</th> <th>Exemple</th> <th>Exemple</th> <th>Exemple</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Anna</td> <td>Pitt</td> <td>35</td> <td>New York</td> <td>États-Unis</td> <td>Femme</td> <td>Oui</td> <td>Oui</td> <td>Oui</td> <td>Oui</td> </tr> </tbody> </table> </div>

Essayez-le vous-même »

Vous pouvez utiliser les classes suivantes pour afficher des barres de défilement à des largeurs d'écran spécifiées :

Nom de classe Largeur d'écran
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Exemple

<div class="table-responsive-sm"> <table class="table"> ... </table> </div>

Essayez-le vous-même »
Autres extensions