oujood.com

Les tableaux avec Bootstrap

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
Dans ce tutoriel, vous apprendrez comment créer des tableaux responsives élégants 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>.

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

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

L'attribut lang

Spécifie la langue du contenu de l'élément

svg tracer des courbes

Les chemin pour déssiner en SVG  partie 2   tracer  des courbes 

Calculer l'âge en utilisant JavaScript

JavaScript offre certaines fonctions intégrées de date et d'heure, qui permettent de calculer l'âge à partir d'une date (date de naissance par exemple).


Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer