Bootstrap 4 : Tables

La manipulation des tables avec bootstrap est simple et pratique avec des éléments intuitifs. De façon simple, on part de la class .table et on personnalise les différents avec des class plus spécifiques.

Avec la class .table, voilà ce que nous obtenons : 

Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans
<table class="table">
  <thead>
    <tr>
      	<th>Nom</th>
      	<th>Prenom</th>
      	<th>Âge</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      	<td>Balo</td>
      	<td>Ziétin</td>
      	<td>35ans</td>
    </tr>
    <tr>
     	<td>Dossou</td>
      	<td>Victor</td>
      	<td>28ans</td>
    </tr>
    <tr>
     	<td>Assou</td>
     	<td>Filbert</td>
     	<td>30ans</td>
    </tr>
  </tbody>
</table>

Si vous voulez avoir un thème sombre de votre table, il suffit juste d'ajouter la class .table-dark :

<table class="table table-dark">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Vous pouvez aussi avoir une alternance de couleur d'une ligne à l'autre en ajoutant la class .table-striped :

<table class="table table-striped">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Pour une alternance de couleurs dans un thème sombre, ça donne ceci : 

<table class="table table-dark table-striped">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Vous aurez remarqué que la table est sans bordure. Si vous voulez ajouter des bordures à la fois au bord de la table et des cellules de la table, vous pouvez utiliser la class .table-bordered :

<table class="table table-bordered">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Les bordures pour le thème sombre : 

<table class="table table-dark table-bordered">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Par contre si vous voulez enlever complètement toutes les bordures, il faudra utiliser la class .table-borderless

<table class="table table-borderless">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Pour le thème sombre : 

<table class="table table-dark table-borderless">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Pour appliquer une couleur d'arrière plan (couleur grise) au survol des lignes de la table, vous avez la class .table-hover :

<table class="table table-hover">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Pour le thème sombre : 

<table class="table table-dark table-hover">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Pour faire ressortir les cellules d'entête, vous pouvez appliquer les class .thead-light pour un arrière plan gris clair et .thead-dark pour un arrière plan gris foncé à l'élément thead de la table.

<thead class="thead-light">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Pour l'entête en arrière plan gris foncé : 

<thead class="thead-dark">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans
Assou Filbert 30ans

Vous pouvez utiliser des classes contextuelles pour colorer des lignes de tableau ou des cellules. Vous avez les noms de class dans la première colonne : 

<table class="table">
  <thead>
    <tr>
      	<th>Class</th>
      	<th>Nom</th>
      	<th>Prenom</th>
      	<th>Âge</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-default">
      	<td>Default</td>
      	<td>Balo</td>
      	<td>Ziétin</td>
      	<td>35ans</td>
    </tr>
    <tr class="table-primary">
     	<td>Primary</td>
     	<td>Dossou</td>
      	<td>Victor</td>
      	<td>28ans</td>
    </tr>
    <tr class="table-secondary">
     	<td>Secondary</td>
     	<td>Assou</td>
     	<td>Filbert</td>
     	<td>30ans</td>
    </tr>
    <tr class="table-success">
      	<td>Success</td>
      	<td>Balo</td>
      	<td>Ziétin</td>
      	<td>35ans</td>
    </tr>
    <tr class="table-danger">
     	<td>Danger</td>
     	<td>Dossou</td>
      	<td>Victor</td>
      	<td>28ans</td>
    </tr>
    <tr class="table-warning">
     	<td>Warning</td>
     	<td>Assou</td>
     	<td>Filbert</td>
     	<td>30ans</td>
    </tr>
    <tr class="table-info">
      	<td>Info</td>
      	<td>Balo</td>
      	<td>Ziétin</td>
      	<td>35ans</td>
    </tr>
    <tr class="table-light">
     	<td>Light</td>
     	<td>Dossou</td>
      	<td>Victor</td>
      	<td>28ans</td>
    </tr>
    <tr class="table-dark">
     	<td>Dark</td>
     	<td>Assou</td>
     	<td>Filbert</td>
     	<td>30ans</td>
    </tr>
  </tbody>
</table>

et ça donne ceci : 

Class Nom Prenom Âge
Default Balo Ziétin 35ans
Primary Dossou Victor 28ans
Secondary Assou Filbert 30ans
Success Balo Ziétin 35ans
Danger Dossou Victor 28ans
Warning Assou Filbert 30ans
Info Balo Ziétin 35ans
Light Dossou Victor 28ans
Dark Assou Filbert 30ans

Pour le thème sombre, les class contextuelles ci-dessus ne donneront pas un bel affichage. Nous avons donc une alternative beaucoup plus agréable avec les class .bg-* comme vous pouvez le voir dans le code ci-dessous :

<table class="table table-dark">
  <thead>
    <tr>
      	<th>Class</th>
      	<th>Nom</th>
      	<th>Prenom</th>
      	<th>Âge</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-default">
      	<td>Default</td>
      	<td>Balo</td>
      	<td>Ziétin</td>
      	<td>35ans</td>
    </tr>
    <tr class="bg-primary">
     	<td>Primary</td>
     	<td>Dossou</td>
      	<td>Victor</td>
      	<td>28ans</td>
    </tr>
    <tr class="bg-secondary">
     	<td>Secondary</td>
     	<td>Assou</td>
     	<td>Filbert</td>
     	<td>30ans</td>
    </tr>
    <tr class="bg-success">
      	<td>Success</td>
      	<td>Balo</td>
      	<td>Ziétin</td>
      	<td>35ans</td>
    </tr>
    <tr class="bg-danger">
     	<td>Danger</td>
     	<td>Dossou</td>
      	<td>Victor</td>
      	<td>28ans</td>
    </tr>
    <tr class="bg-warning">
     	<td>Warning</td>
     	<td>Assou</td>
     	<td>Filbert</td>
     	<td>30ans</td>
    </tr>
    <tr class="bg-info">
      	<td>Info</td>
      	<td>Balo</td>
      	<td>Ziétin</td>
      	<td>35ans</td>
    </tr>
    <tr class="bg-dark">
     	<td>Dark</td>
     	<td>Dossou</td>
      	<td>Victor</td>
      	<td>28ans</td>
    </tr>
  </tbody>
</table>
Class Nom Prenom Âge
Default Balo Ziétin 35ans
Primary Dossou Victor 28ans
Secondary Assou Filbert 30ans
Success Balo Ziétin 35ans
Danger Dossou Victor 28ans
Warning Assou Filbert 30ans
Info Balo Ziétin 35ans
Dark Dossou Victor 28ans

Vous pouvez obtenir une table réduite avec des espaces plus petits avec la class .table-sm

<table class="table table-sm">
Nom Prenom Âge
Balo Ziétin 35ans
Dossou Victor 28ans

Pour avoir une table responsive c'est-à-dire une table qui se déforme pas ou déforme pas le contenu, vous pouvez utiliser la class .table-responsive comme ceci :

<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>
Nom Prenom Âge Sexe Hobbie Profession Pseudo Rêve Autre Autre Autre
Balo Ziétin 35ans Homme Lecture Architecte balozietin Avoir un restaurant N/A N/A N/A
Dossou Victor 28ans Homme Voyage Pilote dossouvictor Avoir une boulangerie N/A N/A N/A
Assou Florianne 30ans Féminin Internet Directrice assouflorianne Avoir une pâtisserie N/A N/A N/A

Vous pouvez spécifier à quel moment le caractère responsif s'applique en fonction des tailles d'écran : 

.table-responsive-sm : écran < 576px
.table-responsive-md : écran < 768px
.table-responsive-lg   : écran < 992px
.table-responsive-xl   : écran < 1200px

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .