Plusieurs mises en forme sont prévues pour les tableaux, j’en ai retenu une pour le tableau de la page :
1 <table class=" table table - bordered table - striped table -
condensed ">
2 <caption>
3 <h4>Les menaces pour les tigres </h4> 4 </caption> 5 <thead> 6 <tr> 7 <th>Lieu </th> 8 <th>Menace </th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr> 13 <td>Grand Mekong </td>
14 <td>Demande croissante de certaines parties de l'
animal pour la mé decine chinoise traditionnelle et fragmentation des habitats du fait du dé veloppement non durable d' infrastructures </td>
15 </tr> 16 <tr>
17 <td>Île de Sumatra </td>
18 <td>Production d' huile de palme et de pâ tes à
papiers </td>
19 </tr> 20 <tr>
21 <td>Indon é sie et Malaisie </td>
22 <td>Pâte à papier , l' huile de palme et le
23 </tr> 24 <tr>
25 <td>États - Unis </td>
26 <td>Les tigres captifs repr é sentent un danger pour
les tigres sauvages </td>
27 </tr> 28 <tr>
29 <td>Europe </td>
30 <td>Gros app é tit pour l' huile de palme </td> 31 </tr>
32 <tr>
33 <td>Né pal </td>
34 <td>Commerce ill é gal de produits dé riv és de tigres <
/td>
35 </tr> 36 </tbody> 37 </table>
Ce qui nous donne le résultat visible à la figure 4.8.
Figure 4.8 – Un tableau stylisé On va analyser les classes utilisées. . .
Classe « table »
C’est la classe de base pour les tableaux, elle fixe quelques styles et crée des lignes de séparation horizontales :
1 <table class=" table "> Ce qui donne la figure 4.9.
Classe « table-bordered »
C’est la classe pour avoir de jolies bordures avec des coins arrondis : 1 <table class=" table table - bordered ">
Figure 4.9 – Effet de la classe table Ce qui donne la figure 4.10.
Figure 4.10 – Effet de la classe table-bordered
Classe « table-striped »
Cette classe ajoute un fond avec un gris très léger pour les lignes impaires (1, 3, . . .) : 1 <table class=" table table - bordered table - striped ">
Je ne vous mets pas d’illustration parce que franchement, le gris est si léger qu’on ne voit rien. Quand je regarde la couleur utilisée, je trouve la valeur #F9F9F9, ce qui est effectivement un gris très très léger. . . Vous pouvez remarquer aussi que, lorsqu’on passe le curseur au-dessus du tableau, la couleur de fond de la ligne correspondante change avec la valeur #F5F5F5, ce qui est déjà un gris assez léger. Je pense que des valeurs un peu plus marquées auraient été souhaitables. Mais rien n’empêche de les changer ! Pour la page d’exemple, je suis passé par une autre approche qui apparaîtra dans un chapitre ultérieur.
Classe « table-condensed »
Cette classe permet de condenser le tableau pour qu’il occupe moins de place verticale : 1 <table class=" table table - bordered table - striped table -
condensed ">
Ce qui donne la figure 4.11.
Vous avez remarqué qu’on peut cumuler l’application des classes sans problème, comme je l’ai fait dans cette démonstration progressive.
Figure 4.11 – Effet de la classe table-condensed
Tableau adaptable avec la classe « table-responsive »
Que se passe-t-il pour un tableau quand on réduit la largeur de l’affichage ? Les colonnes du tableau se réduisent en conséquence jusqu’à rendre l’apparence ni très esthétique, ni très lisible de la figure 4.12.
Figure 4.12 – Effet sans la classe table-responsive
En englobant le tableau avec la classe table-responsive, on fait apparaître une barre de défilement (voir figure 4.13).
1 <section class="col -sm -8 table - responsive ">
2 <table class=" table table - bordered table - striped table -
condensed ">
Un peu de couleur dans les tableaux
Vous avez la possibilité de colorer le fond des lignes des tableaux avec les classes info, success, danger, warning et active. Voici le tableau de notre exemple, mais avec un peu de couleur :
1 <table class=" table table - bordered table - striped table -
condensed ">
2 <caption>
Figure 4.13 – Barre de défilement avec la classe table-responsive 4 </caption> 5 <thead> 6 <tr> 7 <th>Lieu </th> 8 <th>Menace </th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr class=" success "> 13 <td>Grand Mekong </td>
14 <td>Demande croissante de certaines parties de l' animal
pour la mé decine chinoise traditionnelle et
fragmentation des habitats du fait du dé veloppement non durable d' infrastructures </td>
15 </tr>
16 <tr class=" danger ">
17 <td>Île de Sumatra </td>
18 <td>Production d' huile de palme et de pâ tes à papiers </
td>
19 </tr>
20 <tr class=" warning ">
21 <td>Indon é sie et Malaisie </td>
22 <td>Pâte à papier , l' huile de palme et le caoutchouc </
td>
23 </tr>
24 <tr class=" active "> 25 <td>États - Unis </td>
26 <td>Les tigres captifs repr é sentent un danger pour les
tigres sauvages </td>
27 </tr>
28 <tr class=" success "> 29 <td>Europe </td>
30 <td>Gros app é tit pour l' huile de palme </td> 31 </tr>
32 <tr class=" danger "> 33 <td>Né pal </td>
34 <td>Commerce ill é gal de produits dé riv és de tigres </td> 35 </tr>
36 </tbody> 37 </table>
Ce qui donne la figure 4.14.
Figure 4.14 – De la couleur dans les tableaux
Mais évidemment, cette possibilité de colorisation prend tout son sens dans une ges- tion dynamique de données, pour faire apparaître par exemple des enregistrements possédant certaines caractéristiques.