Bootstrap Tableaux

Bootstrap fournit une mise en page claire pour créer des tableaux. Le tableau suivant répertorie certains éléments de tableau pris en charge par Bootstrap :

BaliseDescription
<table>Ajoute un style de base au tableau.
<thead>L'élément conteneur pour la ligne d'en-tête du tableau (<tr>), utilisé pour identifier les colonnes du tableau.
<tbody>L'élément conteneur pour les lignes du tableau (<tr>) dans le corps du tableau.
<tr>Un élément conteneur pour un groupe de cellules de tableau (<td> ou <th>) qui apparaissent sur une seule ligne.
<td>Cellule de tableau par défaut.
<th>Une cellule de tableau spéciale utilisée pour identifier une colonne ou une ligne (selon la portée et la position). Doit être utilisée dans <thead>.
<caption>Une description ou un résumé du contenu stocké dans le tableau.

Classes de tableau

Les styles de tableau suivants peuvent être utilisés dans les tableaux :

Classe Description Exemple
.table Ajoute un style de base à toute <table> (uniquement des séparateurs horizontaux) Essayez-le
.table-striped Ajoute une alternance de couleurs aux lignes dans <tbody> (IE8 non pris en charge) Essayez-le
.table-bordered Ajoute des bordures à toutes les cellules du tableau. Essayez-le
.table-hover Active un état de survol sur toute ligne dans <tbody> Essayez-le
.table-condensed Rend le tableau plus compact. Essayez-le
Combine toutes les classes de tableau. Essayez-le

Classes pour <tr>, <th> et <td>

Les classes dans le tableau ci-dessous peuvent être utilisées sur les lignes ou les cellules du tableau :

Classe Description Exemple
.active Applique la couleur de survol à une ligne ou une cellule. Essayez-le
.success Indique une action réussie. Essayez-le
.info Indique une action de modification informative. Essayez-le
.warning Indique une action d'avertissement. Essayez-le
.danger Indique une action dangereuse. Essayez-le

Tableau de base

Si vous souhaitez un tableau de base avec uniquement du remplissage et des séparateurs horizontaux, ajoutez la classe.table, comme indiqué dans l'exemple ci-dessous :

Exemple

<table class="table"> <caption>Disposition de tableau de base</caption> <thead> <tr> <th>Nom</th> <th>Ville</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table>

Essayez-le »

Le résultat est affiché ci-dessous :

基本的表格

Classes de tableau facultatives

En plus du balisage de tableau de base et de la classe `.table`, il existe également certaines classes qui peuvent être utilisées pour styliser le balisage. Ces classes sont présentées ci-dessous.

Tableau rayé

En ajoutant.table-stripedclasse, vous verrez des rayures sur les lignes dans <tbody>, comme le montre l'exemple ci-dessous :

Exemple

<table class="table table-striped"> <caption>Disposition de tableau rayé</caption> <thead> <tr> <th>Nom</th> <th>Ville</th> <th>Code postal</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table>

Essayez-le »

Le résultat est affiché ci-dessous :

条纹表格

Tableau avec bordures

En ajoutant.table-borderedclass, vous verrez des bordures autour de chaque élément, et le tableau entier est arrondi, comme indiqué dans l'exemple ci-dessous :

Exemple

<table class="table table-bordered"> <caption>Disposition du tableau avec bordures</caption> <thead> <tr> <th>Nom</th> <th>Ville</th> <th>Code postal</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table>

Essayez-le »

Le résultat est affiché ci-dessous :

边框表格

Tableau au survol

En ajoutant la classe.table-hover, un arrière-plan gris clair apparaîtra lorsque le pointeur survole une ligne, comme le montre l'exemple ci-dessous :

Exemple

<table class="table table-hover"> <caption>Mise en page du tableau au survol</caption> <thead> <tr> <th>Nom</th> <th>Ville</th> <th>Code postal</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table>

Essayez-le vous-même »

Le résultat est le suivant :

悬停表格

Tableau condensé

En ajoutant la classe.table-condensed , la marge intérieure des lignes est réduite de moitié pour rendre le tableau plus compact, comme le montre l'exemple ci-dessous. C'est très utile lorsque vous souhaitez que les informations paraissent plus compactes.

Exemple

<table class="table table-condensed"> <caption>Mise en page du tableau condensé</caption> <thead> <tr> <th>Nom</th> <th>Ville</th> <th>Code postal</th></tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td></tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td></tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td></tr> </tbody> </table>

Essayez-le vous-même »

Le résultat est le suivant :

精简表格

Classes contextuelles

Les classes contextuelles listées dans le tableau suivant vous permettent de modifier la couleur d'arrière-plan des lignes du tableau ou de cellules individuelles.

ClasseDescription
.activeApplique la couleur de survol à une ligne ou une cellule particulière.
.successIndique une action réussie ou positive.
.warningIndique un avertissement qui nécessite une attention particulière.
.dangerIndique une action dangereuse ou potentiellement négative.

Ces classes peuvent être appliquées à <tr>, <td> ou <th>.

Exemple

<table class="table"> <caption>Mise en page contextuelle de tableau</caption> <thead> <tr> <th>Produit</th> <th>Date de paiement</th> <th>Statut</th></tr> </thead> <tbody> <tr class="active"> <td>Produit 1</td> <td>23/11/2013</td> <td>En attente d'expédition</td></tr> <tr class="success"> <td>Produit 2</td> <td>10/11/2013</td> <td>Expédition</td></tr> <tr class="warning"> <td>Produit 3</td> <td>20/10/2013</td> <td>En attente de confirmation</td></tr> <tr class="danger"> <td>Produit 4</td> <td>20/10/2013</td> <td>Retourné</td></tr> </tbody> </table>

Essayez-le vous-même »

Le résultat est le suivant :

上下文类

Tableau responsive

En enveloppant n'importe quel.tabledans une.table-responsiveclasse, vous pouvez faire défiler le tableau horizontalement pour l'adapter aux petits appareils (moins de 768px).

Exemple

<div class="table-responsive"> <table class="table"> <caption>Mise en page de tableau responsive</caption> <thead> <tr> <th>Produit</th> <th>Date de paiement</th> <th>Statut</th></tr> </thead> <tbody> <tr> <td>Produit 1</td> <td>23/11/2013</td> <td>En attente d'expédition</td></tr> <tr> <td>Produit 2</td> <td>10/11/2013</td> <td>Expédition</td></tr> <tr> <td>Produit 3</td> <td>20/10/2013</td> <td>En attente de confirmation</td></tr> <tr> <td>Produit 4</td> <td>20/10/2013</td> <td>Retourné</td></tr> </tbody> </table> </div>

Essayez-le vous-même »

Le résultat est le suivant :

响应式表格
Autres extensions