Nous allons voir dans cette leçon comment créer et styliser des tableaux avec Bootstrap 5.
Les classes Bootstrap que nous allons voir dans ce cours :
- table
- table-striped
- table-dark
- table-primary (ou autre couleurs).
- table-hover
- table-bordered
- table-borderless
- table-sm
- table-responsive
- caption-top
Comment créer un tableau de base avec Bootstrap
Comme on le ferait en HTML nous devons, pour créer un tableau avec Bootstrap, utiliser les éléments classiques que sont :
- <table>
- <thead>
- <tr>
- <th>
- <tbody>
La première classe à utiliser pour styliser un tableau créer avec Bootstrap est la classe table, cette dernière va ajouter des marges est des bordures.
Styliser un tableau avec Bootstrap 5
Voyons maintenant toutes les possibilités offertes par Bootstrap pour styliser un tableau.
Créer plusieurs rangées avec un nombre de colonnes différentes
Pour créer ce style nous allons rajouter à l’élément <table> la classe table-striped.
<table class= »table table-striped« >
On peut aussi faire la même chose, mais avec des couleurs sombres en rajoutant la classe table-dark.
<table class= »table table-dark table-striped »>
Changer les couleurs des rangées ou des colonnes d’un tableau
Nous allons reprendre les classes de couleurs vues dans la leçon sur les couleurs avec Bootstrap 5, et les appliquer à notre tableau.
Pour changer la couleur des rangées, on place dans les éléments <tr> la classe table-* suivie de la couleur souhaitée.
Exemple :
<tr class= »table-primary« >
Pour les colonnes on place la classe table-* sur l’élément <td>.
<td class= »table-primary« >
Vous pouvez aussi changer les couleurs tout en conservant un effet zébré en additionnant les deux classes.
<table class= »table table-primary table-striped« >
Créer un effet sur les rangées au passage de la souris
Pour créer un effet, lorsqu’on passe la souris sur une rangée, on va utiliser la classe table-hover sur l’élément <table>.
<table class= »table table-hover « >
Gérer les bordures d’un tableau avec Bootstrap 5
Par défaut, les bordures d’un tableau s’appliquent uniquement sur les rangées, pour placer des bordures sur les colonnes on doit utiliser la classe table-bordered sur l’élément <table>.
On peut aussi créer des bordures de couleurs avec la classe border-* sur l’élément <table>.
Voir la leçon : comment créer des bordures avec Bootstrap 5 ?
<table class= »table table-bordered border-primary« >
Si l’on souhaite créer un tableau sans aucune bordure, on utilise la classe table-borderless.
<table class= »table table-borderless« >
Diminuer la taille d’un tableau
Pour diminuer la taille d’un tableau avec Bootstrap on utilise la classe table-sm sur l’élément <table>. Cette classe a pour fonction de réduire les marges.
<table class= »table table-sm« >
Créer un tableau responsive avec Bootstrap
Un tableau « responsive » est un tableau qui va s’adapter automatiquement a la taille d’écran de vos lecteurs.
Pour créer un tableau « responsive » on va devoir le placer à l’intérieur d’une division <div> et intégrer à cette divison la classe table-responsive.
<div class= »table-responsive« >
<table class= »table »>
…
On peut aussi décider à partir de quelle résolution d’écran, un tableau doit recevoir une barre de défilement en ajoutant un breakpoint (point de transition) a la classe table-responsive.
Voir la leçon sur les Breakpoints de Bootstrap 5
Exemple avec un point de transition (breakpoint) a 768px (md).
<div class= »table-responsive-md« >
Ajouter une légende à un tableau
Comme on le ferait en HTML classique on va tout d’abord utiliser la balise <caption> que l’on placer sous l’element <table>, comme ceci :
div class= »container »>
<div class= »table-responsive »>
<table class= »table »>
<caption>Information Pays</caption>
<thead>
<tr>
……
Par défaut, la légende se loge sous le tableau.
Si l’on souhaite que notre légende se positionne au-dessus du tableau on rajoute la balise <caption> la classe caption-top.
<caption class= »caption-top« >Informations Pays</caption>
Le code complet :
