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.

search |

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

Trafic Booster
hebergement web


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 :

fonction str_repeat,

R p te une chaîne

La pagination avec bootstrap

Comment créer une pagination avec bootstrap.

:first-letter

Ajoute un style pour le premier caractère d'un texte



Rentabilisez efficacement votre site

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