Réalise un tableau avec du code HTML, cela peut ressembler à une usine à gaz, quelle peut être la solution ? Bootstrap tableau : Tu auras un beau tableau (une belle mise-en-forme) sans avoir besoin d’utiliser du CSS (feuille de style), il sera responsive, le tout en utilisant seulement quelques classes. Fermer les cellules de ton tableau ou les laisser ouvertes, c’est toi qui décides, là aussi une classe existe pour cela. Nous verrons aussi comment créer un tableau déroulant en installant jQuery.
Si tu es allergique au code (ça peut arriver !), je t’explique tout dans cet hypertexte comment créer un tableau de A à Z sur WordPress et je te donne de multiples conseils.
Tout d’abord, avant de créer un tableau avec Bootstrap, il faudra l’installer, soit le télécharger, soit insérer le CDN dans ton éditeur de textes préféré. Moi, j’utilise Sublim Texte.
Ensuite, je place le CDN, entre les balises « head ». J’ai récupéré ce « cdn » sur ce site :
Quelques bases HTML pour réaliser un tableau
Pour commencer, nous allons devoir écrire des balises HTML. Pour ce faire, nous allons utiliser des balises spéciales pour créer des tableaux, celles-ci ont un impact sur le référencement naturel (SEO). Enfin, voici quelques balises que nous allons utiliser.
Bootstrap tableau : La structure du tableau
Les premières balises :
- Tout d’abord, « <table> » : Pour dire, « eh, ça c’est un tableau » Google sera ravi de l’apprendre 😉.
- Ensuite, « <thead> » : Il s’agit de l’entête de notre tableau, là tu mets en général un « id », une « nom », une « ville », ou que sais-je encore.
- « <tbody> » : C’est le corps de ton tableau, par exemple : s’il s’agit du nom, tu peux « Luc », « Bob »…
- Enfin, « <tfoot> » : on l’utilise surtout le pied de page si le corps est long et que l’on ne voit plus l’entête, cette balise rappel l’intitulé de l’entête.
Les balises des cellules
C’est là que les choses se compliquent souvent :
- Pour commencer, « <tr> » : Correspond à une ligne, ou à une rangée de ton tableau..
- Ensuite, « <th> » : les cellules en-têtes de ton tableau, il s’agit souvent de la première rangée et la première colonne.
- Enfin, « <td> » : toutes les autres cellules, le corps de ton tableau.
Passons à du concret pour mieux comprendre.
Bootstrap tableau dynamique
Tout d’abord, comme nous utilisons « Bootstrap » (se sont les « class » qui font la puissance de « Bootstrap »), nous allons ajouter une « class » et un attribut :
- « .class table » : Cela va créer un beau design de base à notre table.
- « scope col » : Pour nos cellules de l’en-tête
.
Charge la page HTML (F5), pour voir le résultat.
Le résultat :
Nous voyons que notre première rangée est en gras, ainsi que la première colonne.
Bootstrap tableau : Une cellule vide
Tout d’abord, imaginons maintenant que Priya n’ait pas renseigné sa ville, nous ne savons pas dans quelle ville elle vit. Ça va être compliqué de la retrouver, vu que l’Inde fait trois fois, presque quatre fois la taille de la France.
Ensuite, si je supprime « New Dehli », « Inde » va se déplacer dans la colonne « Ville » : pas top.
Pour ce faire, eh ben nous allons quand même supprimer la « New Dehli », mais en plus nous allons ajouter l’attribut « colspan » et donner la valeur « 2 » à la balise « td » de « Priya ». Cela indique que « Priya » prend deux cellules :
Enfin, le pays « Inde » reste bien au bout :
Mais, tu peux aussi faire cela avec les cellules des colonnes, dans l’exemple qui suit, je l’ai fait avec des cellules en verticales et horizontales :
Voici le résultat :
Voilà deux attributs qui nous permettent de faire beaucoup de choses.
Associer une légende au tableau
Tout d’abord, il est possible d’associer une légende au tableau en utilisant la balise « caption », je l’ai placée avant la balise fermante « table » :
Le résultat :
Bootstrap tableau déroulant
Pour commencer, nous allons cacher notre tableau, et lorsque l’utilisateur cliquera sur un bouton, le tableau va se dérouler. Ensuite, nous allons créer un bouton.
Bouton bootstrap
Bootstrap a de jolis boutons prêts à l’emploi, autant en profiter si déjà nous avons activé la librairie. Tu pourras placer le code qui suit avant la balise « table » :
Ensuite, j’ai appelé mon bouton « Tableau », tu es libre de le nommer différemment.
Le CDN de jQuery
Tout d’abord, pour créer une animation, il nous faut un langage de programmation, nous allons utiliser jQuery, qui est une librairie de JavaScript.
Ensuite, comme pour Bootstrap, nous allons utiliser un CDN : plus rapide et moins lourd, cela a tout pour plaire au référencement. Le CDN se place entre les balises « head » :
Faire apparaître en cliquant sur le bouton
Ensuite, toujours dans ton éditeur de textes, entre les balises « head » ou sur un nouveau script, nous allons ouvrir jQuery avec le code suivant :
jQuery(document).ready(function(){
// écrire le code ici
});
Nous allons écrire une première ligne de code, pour cacher le tableau :
jQuery(document).ready(function(){
$(function(){
$('#table1').css('display','none'); // Cacher le tableau
});
});
N’oublie pas de vérifier sur ton navigateur, pour voir si le tableau a disparu. Bien sûr, recharge la page avant cela.
Si tout est bon, continuons.
Maintenant, lors du clic, nous allons dire : « si le tableau n’existe pas, montre-le, sinon, s’il existe cache le tableau » :
jQuery(document).ready(function(){
$(function(){
$('#table1').css('display','none'); // Cacher le tableau
$('#bouton1').click(function() { // Quand on clic sur le bouton il va se passer quelque chose, quoi ?
$('#table1').toggle('slow'); // Il va se passer : montre ou cache le tableau
});
});
});
Enfin, il ne te reste plus qu’à recharger la page pour vérifier.
Nous allons maintenant voir comment créer un bouton dans un tableau.
Bootstrap tableau avec bouton
Tout d’abord, imagine que tu souhaites montrer un autre tableau, mais seulement lorsque l’utilisateur a affiché le premier tableau.
Création du bouton
Dans cet exemple, nous allons placer le bouton entre les balises « caption », et ajouter un « id », je vais l’appeler « bouton2 » :
Un deuxième tableau bootstrap
Imagine que tu souhaites montrer un autre tableau, mais seulement lorsque l’utilisateur a affiché le premier tableau. Pour ce faire, après la balise fermante « table », nous allons placer notre nouveau tableau, mais cette fois pour changer, nous allons modifier son design, avec la valeur « table table-dark » à la balise « table ». Nous allons également ajouter un « id », je vais l’appeler « table2 », cela nous permettra de cacher le bouton :
Voici le code, pas trop de surprise, il ressemble beaucoup à notre premier tableau :
Il est maintenant sombre, ce sont ces classes que nous avons rajoutées à la balise « table » qui donnent ce rendu :
Nous allons maintenant cacher notre sombre tableau.
Cacher le tableau bootstrap
Nous avons notre 2ème id (id= « table2 »), nous allons l’utiliser pour le faire disparaître avec jQuery. Tu peux le placer à la suite du code précédent dans :
$(function(){
// le le code précédent
// A la suite
});
$('#table2').css('display','none');
Afficher le second tableau bootstrap
Toujours à la suite du code jQuery, nous allons afficher l’id « table2 » :
$('#bouton2').click(function() {
$('#table2').toggle('slow');
});
Ensuite, le code jQuery en entier :
jQuery(document).ready(function(){
$(function(){
$('#table1').css('display','none');
$('#bouton1').click(function() {
$('#table1').toggle('slow');
});
$('#table2').css('display','none');
$('#bouton2').click(function() {
$('#table2').toggle('slow');
});
});
});
Enfin, le rendu final… bien sûr, il est possible d’améliorer le tout :
Nous avons placé le bouton entre les balises « caption », cela-dit, nous aurions pu le mettre à l’intérieur d’une cellule, je t’invite à faire le test.
Responsive table bootstrap
Tout d’abord, je ne connais pas la taille de l’écran de ton ordinateur, le mien fait quinze pouces. Les tableaux que nous utilisons jusqu’à présent sont assez petits, j’entends par là, qu’il y a peu de cellules.
Alors pourquoi dis-je tout ça ?
Rajoute des cellules dans « thead » et des valeurs dans « tbody » et réduis la largeur de ton navigateur pour simuler une tablette ou un smartphone :
Que constates-tu ? Oui, on devine que « thead » a la valeur « Région » et on ne voit pas les cellules suivantes. Et si je te disais que cela n’est pas grave, ben oui, il n’est pas possible de faire autrement. Par contre, ce qui est plus grave c’est qu’il y a une barre de scroll horizontale tout en bas du navigateur.
Tu vas me dire : « OK, mais si nous ne pouvons pas faire autrement, il faut bien mettre cette barre horizontale ».
Tu as parfaitement raison, mais pas ici, nous allons mettre la barre horizontale à notre tableau, après tout, c’est lui qui nous fait ces misères !
Ça n’a l’air de rien comme ça, mais je te garantis que sur un smartphone avoir cette barre horizontale sur toute la page, c’est très pénible. J’irai même plus loin, s’il y a la barre horizontale est tout en bas du navigateur, alors le site ou du moins cette page n’est pas responsive.
Tu l’as compris, nous allons maintenant mettre une barre scroll horizontale à notre container du tableau.
Afficher la barre horizontale scroll au tableau
Pour ce faire, nous allons créer une balise « div » avant la balise « table », dans « div » nous allons écrire « class » et « table-responsive », Boostrap va bien faire les choses tout seul 🙂 :
Voilà qui est mieux, notre barre scroll horizontale est positionnée sous le container de notre tableau :
Les possibiliter du responsive
Tout d’abord, tu as peut-être rajouté la classe « table-responsive », pour autant le navigateur n’est pas content, Bootstrap t’offre la possibilité d’aller plus loin, en utilisant ces « class » :
- .table-responsive-sm
- .table-responsive-md
- .table-responsive-lg
- .table-responsive-xl
- .table-responsive-xxl
Tableau plus compact
Le tableau est assez grand, ce qui le rend bien visible et agréable à lire. Mais pour x raisons, tu souhaites peut-être quelque chose de moins imposant, de plus compact.
Pour ce faire, nous allons ajouter la classe « table-sm » à notre balise table :
Modifier le design des tableaux
Tout d’abord, pour le moment nous avons vu deux types de design de tableaux, voyons ce qu’il est encore possible de faire.
Afficher les vraies cellules
Pour commencer, si l’on regarde de plus près, jusqu’à présent, nous n’avons pas créé de vrais tableaux avec des cellules bien marquées :
Là, nous voyons bien la barre verticale fermer chacune des cellules. Comment j’ai fait cela ?
C’est simple ! à la balise « table » en plus d’avoir la valeur « table » à « class », j’ai ajouté la valeur « table-bordered », comme ceci :
Plus haut, nous avons vu le tableau dark, tu peux très bien appliquer la même classe sur le tableau sombre si tu souhaites fermer les cellules :
Enfin, je te laisse tester ce nouveau visuel. Alors, il existe d’autres thèmes de tableaux avec lesquels tu vas pouvoir appliquer cette classe (« table-bordered »), c’est justement ce que nous allons découvrir maintenant, de nouveaux styles.
Plus de style pour les tableaux
Pour faciliter la lecture des tableaux, tu peux alterner chaque ligne, avec une couleur différente en utilisant la classe « table-striped ». Comme sur l’exemple qui suit, la première ligne avec le fond en blanc, puis la suivante en gris et ainsi de suite :
Tu veux peut-être la valeur de la classe ? la voici :
Changement de style au survol d'un tableaux
Quand tu survoles une ligne, tu peux également créer un effet sympa, pour ce faire, tu vas utiliser la classe « table-hover » que tu vas mettre dans la balise « table ».
Bien sûr, tu t’en doutes, tu peux utiliser cette classe avec les différents thèmes de tableaux.
Modifier le style de chaque ligne et de chaque cellules du tableaux
Tu peux modifier la couleur de chaque ligne de ton tableau. Nous savons que les lignes du tableau sont représentés par la balise « tr ». En ajoutant à chaque balise « tr » une classe de couleur, celles-ci vont changer. Par exemple, j’utilise les classes sur l’image suivante (table-primary ; table-danger ; table-info et table-secondary) :
Un exemple en code bootstrap avec la première balise « tr » :
Pour l’exemple, j’ai utilisé quatre couleurs différentes, mais il en existe d’autres :
- Bleu : table-primary
- Gris : table-secondary
- Vert : table-success
- Rouge : table-danger
- Jaune : table-warning
- Bleu clair : table-info
- Gris clair : table-light
- Noir : table-dark
Je te laisse les tester pour découvrir toutes ces couleurs.
Enfin, sais-tu que tu peux également appliquer les couleurs que l’on a vues plus haut sur les cellules ?
Voilà un exemple avec un morceau de code :
Ce qu'il faut retenir
Créer un tableau avec Bootstrap c’est plus rapide qu’avec seulement du HTML et CSS. J’entends-là, en ajoutant juste quelques classes, tu auras un beau tableau responsive, et même si le design par défaut ne te plait pas tu pourras le modifier facilement et rapidement. Si tu n’utilises pas de CMS tel que WordPress, et que tu souhaites créer un tableau, je te conseille d’installer la librairie Bootstrap et de créer ton tableau avec.
Que penses-tu de créer des tableaux avec Bootdtrap ?
