You are currently viewing Bootstrap Tableau : Tutoriel Créer Avec Un Beau Style
Bootstrap Tableau : Tutoriel Créer Avec Un Beau Style

Bootstrap Tableau : Tutoriel Créer Avec Un Beau Style

  • Auteur/autrice de la publication :
  • Post category:Bootstrap
  • Commentaires de la publication :0 commentaire

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 :

Le CDN de Bootstrap : code CSS
Le CDN de Bootstrap : code CSS

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
    .
Bootstrap tableau avec la classe table et l'attribut scope
Bootstrap tableau avec la classe table et l'attribut scope

Charge la page HTML (F5), pour voir le résultat.

Le résultat :

Résultat du premier tableau
Résultat du premier tableau

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 :

Fusionner des cellules avec l'attribut colspan
Fusionner des cellules avec l'attribut colspan

Enfin, le pays « Inde » reste bien au bout :

Résultat une fois des cellules fusionnées
Résultat une fois des cellules fusionnées

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 :

Tableau bootstrap : avec l'attribut colspan et rowspan
Tableau bootstrap : avec l'attribut colspan et rowspan

Voici le résultat :

Voilà deux attributs qui nous permettent de faire beaucoup de choses.

Tableau bootstrap : avec l'attribut colspan et rowspan (résultat)
Tableau bootstrap : avec l'attribut colspan et rowspan (résultat)

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 » : 

Ajouter une légende au tableau avec la balise caption
Ajouter une légende au tableau avec la balise caption

Le résultat : 

Une légende au pied du tableau
Une légende au pied du tableau

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 » :

Créer un bouton pour faire une liste déroulante
Créer un bouton pour faire une liste déroulante

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 » :

Code CDN jQuery
Code CDN jQuery

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 » :

Créer un bouton entre les balises caption
Créer un bouton entre les balises caption

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 :

Pour créer un tableau dark
Pour créer un tableau dark

Voici le code, pas trop de surprise, il ressemble beaucoup à notre premier tableau :

Créer un tableau dark, avec plus de code
Créer un tableau dark, avec plus de code

Il est maintenant sombre, ce sont ces classes que nous avons rajoutées à la balise « table » qui donnent ce rendu :

Le résultat du tableau dark
Le résultat du tableau dark

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 :

Bootstrap tableau : rendu final du thème tableau dark
Bootstrap tableau : rendu final du thème tableau dark

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 :

Problème de responsive avec les tableaux HTML
Problème de responsive avec les tableaux HTML

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 🙂 :

Rendre un tableau HTML responsive
Rendre un tableau HTML responsive

Voilà qui est mieux, notre barre scroll horizontale est positionnée sous le container de notre tableau :

Résultat : Rendre un tableau HTML responsive
Résultat : Rendre un tableau HTML responsive

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 :

Rendre le tableau plus compacte
Rendre le tableau plus compacte

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 :

Résultat : fermer les cellules
Résultat : fermer les cellules

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 :

Fermer les cellules
Fermer les cellules

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 : 

Fermer les cellules du tableau HTML avec un autre thème
Fermer les cellules du tableau HTML avec un autre thème

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 :

Alterner la couleur des lignes du tableau
Alterner la couleur des lignes du tableau

Tu veux peut-être la valeur de la classe ? la voici :

Résultat : Alterner la couleur des lignes du tableau
Résultat : Alterner la couleur des lignes du tableau

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) :

Plusieurs couleurs par ligne d'un tableau HTML
Plusieurs couleurs par ligne d'un tableau HTML

Un exemple en code bootstrap avec la première balise « tr » :

Ajouter une couleur à une ligne d'un tableau HTML
Ajouter une couleur à une ligne d'un tableau HTML

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 ?

Appliquer une couleur dans une cellule d'un tableau HTML
Appliquer une couleur dans une cellule d'un tableau HTML

Voilà un exemple avec un morceau de code :

Code : Appliquer une couleur dans une cellule d'un tableau HTML
Code : Appliquer une couleur dans une cellule d'un tableau HTML

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 ?

Si vous avez aimé l'article, vous êtes libre de le partager :-)

Laisser un commentaire