Création des tables en bootstrap 3

Les tableaux HTML sont utilisés pour présenter les données sous forme de grille, comme les lignes et les colonnes. En utilisant Bootstrap vous pouvez améliorer considérablement l'apparence de la table d'une manière simple.

Création d'une table simple avec Bootstrap

Vous pouvez créer des tables avec un style de base qui comporte des diviseurs horizontaux et un remplissage de petites cellules (8px par défaut), en ajoutant simplement la classe .table de Bootstrap à l'élément <table>.

 <table class="table">

   <thead>

      <tr>

        <th>Numéro</th>

        <th>Nom</th>

        <th>Prénom</th>

         <th>Email</th>

       </tr>

    </thead>

    <tbody>

        <tr>

          <td>1</td>

          <td>John</td>

           <td>Smith</td>

           <td>JohnSmith@mail.com</td>

         </tr>

         <tr>

            <td>2</td>

             <td>Adam</td>

             <td>james</td>

             <td>Adamjames@mail.com</td>

          </tr>

          <tr>

             <td>3</td>

             <td>jack</td>

             <td>Rambo</td>

             <td>jackrambo@mail.com</td>

           </tr>

       </tbody>

    </table>

Voir le résultat en ligne : Table simple 

Tables à lignes rayées

Vous pouvez créer une table avec des arrière-plans alternatifs comme des zébrures en ajoutant simplement la classe Bootstrap .table-striped à la classe de base .table.

Ceci est obtenu en ajoutant la couleur d'arrière-plan à la ligne de tableau dans l'élément <tbody> via le sélecteur CSS nth-child (non pris en charge dans IE7-8).

                    <table class="table table-striped">

            <thead>

                <tr>

                    <th>Numéro</th>

                   <th>Nom</th>

                   <th>Prénom</th>

                   <th>Email</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                   <td>1</td>

                    <td>John</td>

                    <td>smith</td>

                    <td>johnsmith@mail.com</td>

                </tr>

                <tr>

                    <td>2</td>

                    <td>Adam</td>

                    <td>James</td>

                    <td>adamjames@mail.com</td>

                </tr>

                <tr>

                    <td>3</td>

                    <td>Jack</td>

                    <td>Rambo</td>

                    <td>jackrambo@mail.com</td>

                </tr>

            </tbody>

                    </table>

Voir le résultat en ligne : Tables avec des lignes rayées 

Table avec bordures sur tous les côtés :

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

Activation de l'état Hover sur les lignes de table

Vous pouvez également activer un état hover sur des lignes de table dans un élément <tbody> en ajoutant la classe .table-hover du Bootstrap à la classe de base .table.

Table condensée ou compacte

Vous pouvez également rendre vos tables plus compactes et enregistrer l'espace en ajoutant une classe supplémentaire .table-condensed à la classe de base .table. La classe .table-condensed rend la table compacte en coupant le rembourrage cellulaire en deux.

Classes d'accentuation facultatives pour les rangées de table

Il y a quelques classes contextuelles pour mettre l'accent sur la ligne ou les données de cellules individuelles comme le succès, l'avertissement, le danger, etc par la coloration de son arrière-plan.

                    <table class="table">

            <thead>

                <tr>

                    <th>Numéro</th>

                    <th>Eléve</th>

                    <th>Date de naissance</th>

                    <th>Classe</th>

                </tr>

            </thead>

            <tbody>

                <tr class="active">

                    <td>1</td>

                    <td>Smith john</td>

                    <td>01/02/2000</td>

                    <td>CP2</td>

                </tr>

                <tr class="success">

                    <td>2</td>

                    <td>Jack Adam</td>

                    <td>12/12/2001</td>

                    <td>CP1</td>

                </tr>

                <tr class="info">

                    <td>3</td>

                    <td>Michael james </td>

                    <td>05/01/2003</td>

                    <td>CM1</td>

                </tr>

                <tr class="warning">

                    <td>4</td>

                    <td>Anna </td>

                    <td>01/05/2004</td>

                    <td>CM2</td>

                </tr>

                <tr class="danger">

                    <td>5</td>

                    <td>Elissa</td>

                    <td>02/11/2006</td>

                    <td>CP1</td>

                </tr>

            </tbody>

                    </table>

Le résultat en image :

Création des tables réactives avec Bootstrap(responsive)

Avec Bootstrap 3, vous pouvez également créer des tables sensibles pour permettre le défilement horizontal sur de petits périphériques (largeur d'écran inférieure à 768px). Cependant, si vous affichez des tables sensibles sur d'autres périphériques dont la largeur d'écran est supérieure à 768px, vous ne verrez aucune différence.

Pour rendre une table sensible, placez simplement la table dans un élément <div> et appliquez la classe .table-responsive sur elle.

<div class="table-responsive">

            <table class="table table-bordered">…</table>

</div>

<<<Précédent                                    Début                          Suivant>>>