Les tableaux avec Bootstrap

Ce qui est un tableau responsive

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

Exemple :      Copier 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). 

Exemple :      Copier 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 .

Exemple :      Copier 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 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 :

Exemple :      Copier le code

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

chapitre précédent     chapitre suivant