Intégrer un tableau dans un panel

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 !