Les tableaux avec Bootstrap

Dans ce tutoriel, vous apprendrez comment créer des tableaux élégants avec Bootstrap.

Tutoriel Bootstrap 3

Ce qui est tableau

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.

Voir le tutoriel sur les Tableau HTML pour en savoir plus sur les tableaux.

Création d'une Table Simple avec Bootstrap

Vous pouvez créer des tables avec un style de base possédant des lignes séparateurs horizontaux et des petites cellules (8px par défaut), par simple ajout de la classe .table à l'élément HTML  <table>.

Sélectionner le code

<table class="table">
<thead>
    <tr>
        <th> N° </th>
        <th>Prénom</th>
        <th>Nom</th>
        <th>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Gerywa</td>
        <td>Carabde</td>
<td>GerywaCarabde@mail.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Rachid</td>
        <td>Hadad</td>
        <td>peterparker@mail.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
    </tr>
</tbody>
</table>

 

Tables avec fond alternatif

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 .

Ce résultat est obtenu en ajoutant de la couleur à l'arrière-plan de la ligne de la table au sein de l'élément <tbody>  (non supporté dans IE7-8). 

Sélectionner le code

<table class="table table-striped">
<thead>
    <tr>
        <th> N° </th>
        <th>Prénom</th>
        <th>Nom</th>
        <th>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Gerywa</td>
        <td>Carabde</td>
        <td>GerywaCarabde@mail.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Rachid</td>
        <td>Hadad</td>
        <td>peterparker@mail.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
    </tr>
</tbody>
</table>

 

Tableau avec bordures

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

Sélectionner le code

<table class="table table-bordered ">
<thead>
    <tr>
        <th> N° </th>
        <th>Prénom</th>
        <th>Nom</th>
        <th>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Gerywa</td>
        <td>Carabde</td>
        <td>GerywaCarabde@mail.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Rachid</td>
        <td>Hadad</td>
        <td>peterparker@mail.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
    </tr>
</tbody>
</table>

 

Tables de responsives

La classe .table-responsive crée une table responsive.

La table sera ensuite défiler horizontalement sur les petits appareils (sous 768px). Lorsque vous affichez sur quelque chose de plus large que 768px, il n'y a pas de différence :

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 , comme illustré dans l'exemple ci-dessous :

Sélectionner le code

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

 
 

chapitre précédent chapitre suivant

Par carabde 25 decembre 2015