Créer des tableaux avec Bootstrap 5

Bootstrap tableau

Nous allons voir dans cette leçon comment créer et styliser des tableaux avec Bootstrap 5.

Table des matieres

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.

Créer un tableau de base avec Bootstrap
Créer un tableau de base avec Bootstrap

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“>

Créer un tableau avec une alternance de couleur entre les rangées (appelé effet zébré) avec bootstrap 5

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”>

Créer un tableau avec une alternance de couleur entre les rangées (appelé effet zébré) avec bootstrap 5

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“>

Changer les couleurs des rangées ou des colonnes d’un tableau
Changer les couleurs des rangées ou des colonnes d’un tableau

Pour les colonnes on place la classe table-* sur l’élément <td>.

<td class=”table-primary“>

Bootstrap 5 Changer les couleurs des rangées ou des colonnes d’un tableau
Bootstrap 5 Changer les couleurs des rangées ou des colonnes d’un tableau

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 “>

Créer un effet sur les rangés au passage de la souris avec bootstrap 5

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>.

Gérer les bordures d’un tableau avec Bootstrap 5
Gérer les bordures d’un tableau avec Bootstrap 5

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“>

Gérer les bordures d’un tableau avec Bootstrap 5

Si l’on souhaite créer un tableau sans aucune bordure, on utilise la classe table-borderless.

<table class=”table table-borderless“>

Gérer les bordures d’un tableau avec Bootstrap 5

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”>

Créer un tableau responsive avec Bootstrap 5

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.

Ajouter une légende à un tableau créer avec Bootstrap 5

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>

Ajouter une légende à un tableau créer avec Bootstrap 5

Le code complet :

Bootstrap tableau
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0