La classe .table
La classe .table est la classe Bootstrap de base pour styliser des tableaux. Nous allons passer cette classe à un élément table. Celle-ci va appliquer une première mise en forme relativement basique à notre tableau.
See the Pen
Bootstrap 3.1.1 by Pierre (@pierregiraud)
on CodePen.
Inverser les couleurs d’un tableau
On va pouvoir inverser les couleurs par défaut d’un tableau Bootstrap, c’est-à-dire avoir une couleur de fond noire et une couleur de texte blanche en ajoutant la classe .table-dark en plus de la classe .table à notre élément HTML table.
See the Pen
Bootstrap 3.1.2 by Pierre (@pierregiraud)
on CodePen.
Personnaliser l’en-tête d’un tableau
Bootstrap met à notre disposition deux classes qu’on va pouvoir appliquer à un élément thead pour personnaliser l’en-tête de nos tableaux : les classes .thead-light (ligne d’en-tête avec un fond gris clair) et .thead-dark (ligne d’en-tête avec un fond noir).
See the Pen
Bootstrap 3.1.3 by Pierre (@pierregiraud)
on CodePen.
Créer un tableau avec alternance de couleurs entre les lignes
La classe Bootstrap .table-striped qu’on va pouvoir appliquer à notre élément table va nous permettre de créer des tableaux zébrés avec une ligne au fond blanc et une ligne au fond gris clair en alternance.
Nous pouvons utiliser cette classe avec la classe .table-dark afin de créer un tableau zébré foncé avec alternance de lignes au fond noir et gris foncé.
See the Pen
Bootstrap 3.1.4 by Pierre (@pierregiraud)
on CodePen.
Ajouter ou supprimer des bordures d’un tableau
Nous allons pouvoir ajouter des bordures autour de chaque cellule et autour de notre tableau grâce à la classe .table-bordered. Nous allons une nouvelle fois appliquer cette classe à notre élément table.
Nous allons bien évidemment pouvoir combiner cette classe aux classes .table-dark et .table-striped.
Pour au contraire supprimer toutes les bordures d’un tableau, on va pouvoir utiliser la classe .table-borderless.
See the Pen
Bootstrap 3.1.5 by Pierre (@pierregiraud)
on CodePen.
Ajouter des effets lors du passage de la souris
Nous allons encore pouvoir ajouter un peu d’interactivité à notre tableau en changeant la couleur de fond d’une ligne lors du survol de la souris de celle-ci en appliquant la classe .table-hover à notre élément table.
Cette classe va à nouveau pouvoir être combinée aux précédentes pour créer des effets intéressants.
Notez que seules les lignes à l’intérieur de l’élément tbody vont changer de couleur de fond au survol de la souris.
See the Pen
Bootstrap 3.1.6 by Pierre (@pierregiraud)
on CodePen.
Diminuer la taille des marges internes des cellules du tableau
Nous allons également pouvoir rendre notre tableau plus compact en appliquant la classe .table-sm à notre élément table. Cela aura pour effet de diviser le padding de chaque cellule par deux.
See the Pen
Bootstrap 3.1.7 by Pierre (@pierregiraud)
on CodePen.
Utiliser les couleurs contextuelles avec les tableaux
Nous allons pouvoir utiliser les couleurs contextuelles de Bootstrap pour changer la couleur de chaque ligne ou de chaque cellule d’un tableau. On va pouvoir utiliser les classes suivantes :
.table-active;.table-primary;.table-secondary;.table-success;.table-danger;.table-warning;.table-info;.table-light;.table-dark.
Notez que ces couleurs ne vont pas fonctionner avec un tableau possédant une classe .table-dark. Un hack connu va alors consister à utiliser plutôt les classes de couleurs contextuelles .bg-* pour arriver à des résultats similaires.
See the Pen
Bootstrap 3.1.8 by Pierre (@pierregiraud)
on CodePen.
Créer des tableaux adaptables
Les tableaux sont des éléments HTML complexes. Cette complexité est aujourd’hui décuplée par le besoin d’avoir des pages qui s’adaptent à toutes les tailles d’écran.
Dans le cas spécifique d’un tableau, cet aspect responsive semble difficile à mettre en place à priori puisqu’on ne peut pas véritablement « casser » une ligne de tableau en renvoyant des éléments à la ligne sans risquer de perdre le sens premier d’un tableau qui est de présenter des informations de façon ordonnée.
Pour nous aider, Bootstrap nous fournit une classe .table-responsive qui va ajouter une barre de défilement horizontale interne aux tableaux dont les lignes seraient plus grandes que leur conteneur.
Cela permet aux utilisateurs d’avoir toujours accès à l’ensemble du tableau sans faire perdre de sens au tableau et sans casser le design de nos pages.
La classe .table-responsive va nous permettre de créer des tableaux responsive pour toutes les tailles de fenêtres. Pour définir des tableaux responsive uniquement jusqu’à certaine taille de fenêtre, on peut utiliser les classes .table-responsive{-sm|-md|-lg|-xl}.
Ces classes vont permettre à nos tableaux d’être responsive jusqu’à ce qu’ils atteignent un certain breakpoint.
| Classe | Tableau responsive jusqu’à |
|---|---|
| .table-responsive-sm | 576px |
| .table-responsive-md | 768px |
| .table-responsive-lg | 992px |
| .table-responsive-xl | 1200px |
Faites bien attention ici : dans la grande majorité des cas, les breakpoint sont utilisés pour définir des comportements différents pour nos éléments A PARTIR du breakpoint concerné. Dans le cas des tableaux, les breakpoint sont utilisés pour définir un comportement JUSQU’AU breakpoint concerné.
Notez également qu’on ne va pas ajouter ces classes à l’élément table en soi mais plutôt à un élément dont le but va être de servir de conteneur pour le tableau.
See the Pen
Bootstrap 3.1.9 by Pierre (@pierregiraud)
on CodePen.
