Sommaire

Temps de lecture approximative : 5 minutes

Chapitre 3 - Les tableaux

Les tableaux sont des élements incontournables des pages web. Leur utilisation est généralisée et c'est pourquoi Bootstrap les embarquent. Pour utiliser les styles mis à disposition par le framework, c'est très simple. Il suffit d'ajouter la classe .table à l'élément <table>. C'est le comportement par défaut qui est mis en évidence ci-dessous mais Bootstrap fournit bien plus. Découvrons au fur et à mesure de ce chapitre toutes les possibilités que nous offre Bootstrap 4.

Comportement par défaut

<table class="table">
   <thead>
      <tr>
         <th>Prénom</th>
         <th>Nom</th>
         <th>Pays</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Gerard</td>
         <td>Schaefer</td>
         <td>États-Unis</td>
      </tr>
      <tr>
         <td>Guy</td>
         <td>Georges</td>
         <td>France</td>
      </tr>
      <tr>
         <td>Roberto</td>
         <td>Succo</td>
         <td>Italie</td>
      </tr>
   </tbody>
</table>

Couleur arrière-plan

En ajoutant la classe .table-striped sur l'élément <table>, une ligne sur deux de <tbody> aura une couleur d'arrière plan.

<table class="table table-striped">
   <thead>
      <tr>
         <th>Prénom</th>
         <th>Nom</th>
         <th>Pays</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Gerard</td>
         <td>Schaefer</td>
         <td>États-Unis</td>
      </tr>
      <tr>
         <td>Guy</td>
         <td>Georges</td>
         <td>France</td>
      </tr>
      <tr>
         <td>Roberto</td>
         <td>Succo</td>
         <td>Italie</td>
      </tr>
   </tbody>
</table>

Bordures

En ajoutant la classe .table-bordered sur l'élément <table>, les bordures de toutes les cellules (<td>) du tableau seront mis en valeur.

<table class="table table-bordered">
   <thead>
      <tr>
         <th>Prénom</th>
         <th>Nom</th>
         <th>Pays</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Gerard</td>
         <td>Schaefer</td>
         <td>États-Unis</td>
      </tr>
      <tr>
         <td>Guy</td>
         <td>Georges</td>
         <td>France</td>
      </tr>
      <tr>
         <td>Roberto</td>
         <td>Succo</td>
         <td>Italie</td>
      </tr>
   </tbody>
</table>

Survol des lignes

En ajoutant la classe .table-hover sur l'élément <table>, le survol d'une ligne du tableau (<tr>) est mis en valeur par la modification de la couleur d'arrière plan.

<table class="table table-hover">
   <thead>
      <tr>
         <th>Prénom</th>
         <th>Nom</th>
         <th>Pays</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Gerard</td>
         <td>Schaefer</td>
         <td>États-Unis</td>
      </tr>
      <tr>
         <td>Guy</td>
         <td>Georges</td>
         <td>France</td>
      </tr>
      <tr>
         <td>Roberto</td>
         <td>Succo</td>
         <td>Italie</td>
      </tr>
   </tbody>
</table>

Mise en valeur d'une ligne ou d'une cellule

Le framework Bootstrap est incroyable, une simple classe et hop pif paf pouf tout se colore. En ajoutant l'une des classes ci-après sur la ligne (<tr>) ou la celulle (<td> ou <th>) de votre choix et l'élément se colorira. Pratique et efficace, mais que demande de plus les développeurs ?

<table class="table table-hover">
   <thead>
      <tr>
         <th>Classe</th>
         <th>Prénom</th>
         <th>Nom</th>
      </tr>
   </thead>
   <tbody>
      <tr class="table-primary">
         <td><code>.table-primary</code></td>
         <td>Gerard</td>
         <td>Schaefer</td>
      </tr>
      <tr class="table-secondary">
         <td><code>.table-secondary</code></td>
         <td>Guy</td>
         <td>Georges</td>
      </tr>
      <tr class="table-success">
         <td><code>.table-success</code></td>
         <td>Roberto</td>
         <td>Succo</td>
      </tr>
      <tr class="table-danger">
         <td><code>.table-danger</code></td>
         <td>Ted</td>
         <td>Bundy</td>
      </tr>
      <tr class="table-warning">
         <td><code>.table-warning</code></td>
         <td>Arthur</td>
         <td>Bishop</td>
      </tr>
      <tr class="table-info">
         <td><code>.table-info</code></td>
         <td>Joachim</td>
         <td>Kroll</td>
      </tr>
   </tbody>
</table>

Responsive design

Rendre responsive design un tableau n'est pas chose aisé. Faut-il que les cellules s'empilent ? Faut-il scroller horizontalement pour parcourir le contenu ? C'est la deuxième solution que met en oeuvre Bootstrap. En ajoutant la classe .table-responsive sur l'élément <table>, le tableau devient responsive. Sur les écrans mobiles, il sera nécessaire de faire défilier horizontalement le contenu.

<table class="table table-responsive">
   <thead>
      <tr>
         <th>Prénom</th>
         <th>Nom</th>
         <th>Pays</th>
         <th>Date de naissance</th>
         <th>Victimes</th>
         <th>Surnom</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Ted</td>
         <td>Bundy</td>
         <td>États-Unis</td>
         <td>24/11/1946</td>
         <td>Environ 30</td>
         <td>Le Tueur de Femmes</td>
      </tr>
      <tr>
         <td>Guy</td>
         <td>Georges</td>
         <td>France</td>
         <td>15/10/1962</td>
         <td>7</td>
         <td>Le tueur de l'Est parisien</td>
      </tr>
      <tr>
         <td>Ottis</td>
         <td>Toole</td>
         <td>États-Unis</td>
         <td>15/09/1947</td>
         <td>100+</td>
         <td>Le cannibale de Jacksonville</td>
      </tr>
   </tbody>
</table>