rudless.

Les tableaux dans Bootstrap

1. Objectifs

• Connaitre comment Bootstrap traite les tableaux
• Etre capable de créer des tableaux élégants avec Bootstrap

2. Présentation

• Un tableau est un élément HTML, utilisé pour le classement et à la présentation des données. Ce n’est donc pas un outil de mise en page même s’il est souvent employé, par erreur, à cet effet.
• Les tableaux HTML servent à présenter les données sous forme de grille (lignes et colonnes). À l’aide de Bootstrap vous pouvez considérablement améliorer l’apparence du tableau d’une manière simple.
• Bootstrap propose quatre modèles de tableaux :
• Les tableaux basiques
• Les tableaux condensés
• Les tableaux avec bordures
• Les tableaux zébrés
• Dans ce tutoriel nous allons voir comment Bootstrap traite les tableaux.

3. Les tableaux basiques

• Avec ou sans utilisation du Bootstrap, un tableau se déclare avec la balise <table>. Mais pour appliquer la mise en forme Bootstrap, il faudra appeler la classe .table lors de la déclaration du tableau.
• 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.

<table class="table">
      <thead>
          <tr>
              <th>CIN</th>
              <th>Prénom</th>
              <th>Nom</th>
              <th>Email</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>02875401</td>
              <td>Mohamed</td>
              <td>Rahhal</td>
      <td>mohamed.rahhal@gmail.com</td>
          </tr>
          <tr>
              <td>07986532</td>
              <td>Rachid</td>
              <td>Hadded</td>
              <td>rachidhadded@gmail.com</td>
          </tr>
          <tr>
              <td>03985421</td>
              <td>Jamila</td>
              <td>Rahmani</td>
              <td>rahmani123@gmail.com</td>
          </tr>
          <tr>
            <td>03985477</td>
            <td>Samira</td>
            <td>Soltani</td>
            <td>samirasousou@gmail.com</td>
        </tr>
      </tbody>
      </table>

• Ce qui donne le résultat suivant :

4. La classe table-striped

• Cette classe ajoute un fond avec un gris très léger pour les lignes impaires (1, 3,5, …) pour tout ce qui se situe dans le <tbody> :
• Vous pouvez créer la table avec fond alternatif (zèbre-bandes) tout simplement en combinant la classe .table-striped avec la classe de base .table

 <table class="table table-striped">

5. La classe table-sm

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

 <table class="table table-sm">

6. La classe table-bordered

• Vous pouvez également ajouter des bordures à toutes les cellules du tableau en ajoutant la classe .table-bordered à la classe de base .table.

 <table class="table-bordered">

7. La classe table-responsive

• Pour Faire un tableau responsive il faut juste insérer le tableau à l’intérieur d’un élément <div> auquel on applique la classe .table-responsive

 <table class="table-responsive">

8. La classe table-dark

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

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

Classe	Effet
.table-responsive	Tableau responsive qui s’adapte au support.
.table-inverse	Fond noir et police d’écriture blanche.
.thead-inverse	Fond noir et police d’écriture blanche pour les cellules d’en-tête uniquement. Se place sur l’élément thead.
.table-striped	Appliqué sur l’élément table, ajoute des zébrures aux lignes contenues à l’intérieur de tbody.
.table-bordered	Ajoute des bordures autour du tableau ainsi qu’autour de chaque cellule.
.table-hover	Positionné sur table, ajoute des effets de survol sur chaque ligne de tbody.
.table-sm	Réduit les marges intérieures des cellules de moitié, pour un rendu plus compact.