Aujourd’hui nous allons apprendre à intégrer un tableau dans un panel de façon responsive avec Bootstrap. Il est bon de voir à quel point le framework est flexible et nous permet d’assembler plusieurs composants.
Mise en place du panel
La première chose à faire est de mettre en place le panel. Tout d’abord, ajoutons une balise HTML5 <section> de classe panel (pour la structure) et panel-default (pour l’apparence).
<section class="panel panel-default">...</section>
Ensuite, dans une nouvelle balise <header>, nous pouvons ajouter au panel un espace réservé au titre : panel-heading.
<section class="panel panel-default"> <header class="panel-heading">Un titre de beau gosse</header> </section>
Enfin, dans une nouvelle balise <section> il nous faut intégrer le corps du panel : panel-body.
<section class="panel panel-default"> <header class="panel-heading">Un titre de beau gosse</header> <section class="panel-body"> <p>Ici un texte de beau gosse dans une balise p pour décrire notre tableau de beau gosse.</p> </section> </section>
Intégrer le tableau
Comme vous pouvez l’imaginer, nous allons intégrer le tableau au sein du corps du panel (panel-body). Commençons par insérer la balise mère <table> de classe table.
<table class="table">...</table>
Par la suite, nous allons suivre le même cheminement que l’intégration du panel : heading + body (vous voyez, il n’y a rien de difficile là dedans, juste un peu de logique). Dans un premier temps, la balise <thead> (« t » pour « table » et « head » pour « en-tête ») renfermera la ligne principale du tableau.
<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> </table>
La seconde partie intègre les balises <tr> à l’intérieur de la balise <tbody>.
<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
Il ne nous reste plus qu’à fusionner le tableau au panel. Le tableau vient s’insérer à l’intérieur de la balise <section> de classe panel-body.
<section class="panel panel-default"> <header class="panel-heading">Un titre de beau gosse</header> <section class="panel-body"> <p>Ici un texte de beau gosse dans une balise p pour décrire notre tableau de beau gosse.</p> </section> <!-- Tableau --> <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </section>
À vous de jouer !