Bootstrap Tableaux

Introduction

Dans ce tutoriel, vous apprendrez à utiliser la boîte à outils Bootstrap pour créer des tableaux.

Explication

Dans Bootstrap version 2.0, les lignes 1034 à 1167 de bootstrap.css contiennent les styles de tableau.

Comme vous le savez, les tableaux sont utilisés pour présenter des données tabulaires. Bootstrap fait de même, et le balisage doit être placé comme suit :

Si vous utilisez des en-têtes de colonne, la hiérarchie doit être la suivante :

Exemple de tableau simple pour Bootstrap

Exemple

<table class="table">
    <thead>
    <tr>
        <th>Student-ID</th>
        <th>Prénom</th>
        <th>Nom</th>
        <th>Grade</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>Rammohan </td>
        <td>Reddy</td>
        <td>A+</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Smita</td>
        <td>Pallod</td>
        <td>A</td>
    </tr>
    <tr>
        <td>003</td>
        <td>Rabindranath</td>
        <td>Sen</td>
        <td>A+</td>
    </tr>
    </tbody>
</table>

Sortie

output table with bootstrap

Voir en ligne

Exemple de tableau rayé pour Bootstrap

Ce tableau utilise la classe CSS striped, qui est définie dans le fichier CSS Bootstrap associé, et le nom de la classe est .table-striped.

Exemple

<table class="table table-striped">
    <thead>
    <tr>
        <th>Student-ID</th>
        <th>Prénom</th>
        <th>Nom</th>
        <th>Grade</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>Rammohan </td>
        <td>Reddy</td>
        <td>A+</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Smita</td>
        <td>Pallod</td>
        <td>A</td>
    </tr>
    <tr>
        <td>003</td>
        <td>Rabindranath</td>
        <td>Sen</td>
        <td>A+</td>
    </tr>
    </tbody>
</table>

Sortie

output zebra stripped table with bootstrap

Voir en ligne

Affichez l'exemple ci-dessus dans différentes fenêtres de navigateur.

Cliquez ici pour télécharger tous les fichiers HTML, CSS, JS et images utilisés dans ce tutoriel.

Autres extensions