Dans ce chapitre nous allons voir comment Bootstrap traite les tableaux.

La page d’exemple

Dans la page d’exemple vue au chapitre précédent on va remplacer la liste de définition par un tableau :

<table class="table table-bordered table-striped table-sm">
  <caption>
    <h4>Les menaces pour les tigres</h4>
  </caption>
  <thead>
    <tr>
      <th>Lieu</th>
      <th>Menace</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Grand Mekong</td>
      <td>Demande croissante de certaines parties de l’animal pour la médecine chinoise traditionnelle 
et fragmentation des habitats du fait du développement non durable d’infrastructures</td>
    </tr>
    <tr>
      <td>Île de Sumatra</td>
      <td>Production d’huile de palme et de pâtes à papiers</td>
    </tr>
    <tr>
      <td>Indonésie et Malaisie</td>
      <td>Pâte à papier, l’huile de palme et le caoutchouc</td>
    </tr>
    <tr>
      <td>États-Unis</td>
      <td>Les tigres captifs représentent un danger pour les tigres sauvages</td>
    </tr>
    <tr>
      <td>Europe</td>
      <td>Gros appétit pour l’huile de palme</td>
    </tr>
    <tr>
      <td>Népal</td>
      <td>Commerce illégal de produits dérivés de tigres</td>
    </tr>
  </tbody>
</table>

Avec cet aspect sur grand écran :

Tester en ligne

Remarquez que par défaut Bootstrap place le titre en bas à gauche. Cet emplacement peut paraître étrange. Si on regarde les règles on trouve :

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #868e96;
  text-align: left;
  caption-side: bottom;
}

Pour avoir un titre en haut et centré il suffit de surcharger les deux dernières règles.

Le tableau s’adapte automatiquement à la réduction, par exemple sur smartphone :

Les classes de base

La classe table

Bootstrap ne formate pas par défaut la balise <table> pour ne pas entrer en conflit avec les nombreux composants qui utilisent des tableaux (par exemple les calendriers). Donc pour avoir du style il faut impérativement utiliser la classe table. Voyons ce que ça donne avec notre tableau :

<table class="table">

On se retrouve avec cet aspect :

La mise en forme est légère et élégante avec des lignes séparatrices horizontales

La classe table-striped

Cette classe ajoute un fond avec un gris très léger pour les lignes impaires (1, 3, …) pour tout ce qui se situe dans le <tbody> :

<table class="table table-striped">

La classe table-sm

Cette classe permet de condenser le tableau pour qu’il occupe moins de place verticalement :

<table class="table table-striped table-sm">

La classe table-bordered

C’est la classe pour avoir des bordures :

<table class="table table-striped table-sm table-bordered">

On a maintenant les séparations verticales et on se retrouve avec le tableau tel qu’il est dans la page d’exemple.

Survol

Il arrive de vouloir mettre en évidence une ligne d’un tableau au survol de la souris. Dans ce cas il faut utiliser la classe table-hover :

<table class="table table-sm table-hover">

Effet d’inversion et couleurs

Un tableau sur fond noir

Pour obtenir plus de contraste on peut assombrir le fond du tableau avec la classe table-dark :

<table class="table table-sm table-dark">

Fond noir pour les titres

Si vous désirez uniquement les titres sur fond noir il faut utiliser la classe thead-dark :

<thead class="thead-dark">

Fond gris pour les titres

Si vous désirez uniquement les titres sur fond gris il faut utiliser la classe thead-light :

<thead class="thead-light">

Un peu de couleurs

Vous avez la possibilité de colorer le fond des lignes des tableaux avec ces classes :

• table-primary : couleur primaire
• table-secondary : couleur secondaire
• table-light : fond clair
• table-dark : fond sombre
• table-info : fond cyan
• table-success : fond vert
• table-danger : fond rouge
• table-warning : fond orange
• table-active : fond gris

Voici le tableau de notre exemple, mais avec un peu de couleur :

<table class="table table-sm">
  <caption>
    <h4>Les menaces pour les tigres</h4>
  </caption>
  <thead class="table-info">
    <tr>
      <th class="table-danger">Lieu</th>
      <th>Menace</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table-warning">Grand Mekong</td>
      <td>Demande croissante de certaines parties de l’animal pour la médecine chinoise traditionnelle 
et fragmentation des habitats du fait du développement non durable d’infrastructures</td>
    </tr>
    <tr class="table-active">
      <td>Île de Sumatra</td>
      <td>Production d’huile de palme et de pâtes à papiers</td>
    </tr>
    <tr>
      <td>Indonésie et Malaisie</td>
      <td class="table-success">Pâte à papier, l’huile de palme et le caoutchouc</td>
    </tr>
    <tr>
      <td>États-Unis</td>
      <td>Les tigres captifs représentent un danger pour les tigres sauvages</td>
    </tr>
    <tr>
      <td>Europe</td>
      <td>Gros appétit pour l’huile de palme</td>
    </tr>
    <tr>
      <td>Népal</td>
      <td>Commerce illégal de produits dérivés de tigres</td>
    </tr>
  </tbody>
</table>

J’ai fait un peu n’importe quoi pour montrer qu’on peut indifféremment styliser une ligne ou une cellule.

Mais évidemment, cette possibilité de colorisation prend tout son sens dans une gestion dynamique de données, pour faire apparaître par exemple des enregistrements possédant certaines caractéristiques.

Tableau « responsive »

Que se passe-t-il pour un tableau quand on réduit la largeur de l’affichage ? Les colonnes du tableau se réduisent en conséquence jusqu’à rendre l’apparence ni très esthétique, ni très lisible s’il y a de nombreuses colonnes. Considérez le tableau suivant :

<table class="table">
  <thead>
    <tr>
      <th>Titre de colonne</th>
      <th>Titre de colonne</th>
      <th>Titre de colonne</th>
      <th>Titre de colonne</th>
      <th>Titre de colonne</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
    </tr>
    <tr>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
    </tr>
    <tr>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
      <td>Contenu de la cellule</td>
    </tr>
  </tbody>
</table>

Sur grand écran pas de souci :

Mais quand on réduit la place manque vite jusqu’à carrément tronquer le tableau :

En englobant le tableau avec la classe ‌table-responsive, on fait apparaître une barre de défilement :

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

En résumé

• Bootstrap met élégamment en forme les tableaux.
• Il existe de nombreuses classes pour styliser un tableau : bordure, diminution de la hauteur, effet de survol…
• On peut fixer la teinte du fond du tableau ou juste les titres.
• Un tableau peut être rendu « responsive » pour faire apparaître une barre de défilement sur petit support.
• On peut utiliser des couleurs de fond pour mettre en valeur lignes ou cellules.