Créer un tableau sans utiliser une seule ligne de code, pour cela nous allons utiliser un plugin très populaire, tu s’auras tout de son fonctionnement en suivant cet article. Et si tu souhaites aller plus loin, je vais même te montrer comment améliorer la visibilité de ton tableau WordPress avec du CSS : Ne t’inquiète pas, je te donne les lignes de codes et te dit où les placer. Bonne lecture…
Comment insérer un tableau en HTML
Tout d’abord, comment réalisons-nous un tableau en HTML. Il est nécessaire d’utiliser plusieurs balises : la balise <table> pour insérer le tableau, la balise <thead> pour créer une en-tête, <tr> pour insérer un ligne, <td> pour créer une cellule.
Ce n’est pas une liste exhaustive, si tu veux en savoir plus, j’ai écrit un article à ce sujet, j’évoque également Bootstrap mais tu n’es pas obligé de l’installer, tu peux très bien juste créer ton tableau HTML.
Un plugin tableau WordPress
Pour commencer, nous allons télécharger et installer un plugin pour créer des tableaux sur un site WordPress. Il s’agit de l’extension très populaire TablePress :
- Tout d’abord, survol Exentions.
- Ensuite, Clique sur Ajouter.
- Ecris « tablepress » dans la zone de recherche.
- Ensuite, clique sur le bouton Installer maintenant.
- Clique sur le bouton Activer.
- Ensuite, nous allons créer de suite un nouveau tableau, pour ce faire survol TablePress.
- Enfin, clique sur Ajouter un tableau.
Chez moi, l’extension TablePress a huit cent mille installations actives et cinq étoiles sur cinq pour plus de quatre mille votant. De plus, le plugin est compatible avec ma version WordPress et il a été mis à jour il y a deux mois. Tout se présente très bien…
Comment faire un tableau avec WordPress ?
Tout d’abord, si tu as suivit les étapes précédentes, tu es certainement dans TablePress -> Ajouter un tableau.
Pour cet exemple, je vais créer un tableau d’inscription d’un championnat du monde d’une course en trottinette. Bien sûr, tu peux choisir un autre exemple, disons que j’ai choisi le premier truc qui me passe par la tête !
- A Nom du tableau : « Tableau d’inscription ».
- Description (optionnel) : « Championnat du monde de la course en trottinette, voici les participants ».
- A Nombre de lignes : 5.
- Enfin à Nombre de colonnes : 15.
N’oublie pas de cliquer sur Ajouter un tableau.
Mise en forme tableau WordPress
Ensuite, nous allons remplir les cellules de notre tableau :
En survolant les lettres des colonnes, tu pourras les déplacer si tu cliques dessus. Très pratique, si tu souhaites réagencer tes colonnes, mais tu peux faire la même chose avec les lignes.
Plus haut, vers la droite, tu trouves un code court, tu peux le placer là où tu le souhaites, moi je l’ai mis sur une page avec le module « HTML personnalisé » de Gutenberg.
Voilà ce qu’il m’affiche :
Il nous affiche bien les quinze colonnes du tableau, mais je ne pense pas que c’est la bonne solution, car notre tableau est complètement compressé. Personnellement, quand je vois ça, cela ne me donne pas envie de lire le tableau : le texte de l’en-tête n’est pas aligné et, « Commentaire » est complètement compressé.
Bref, nous allons modifier cela plus loin. Mais avant, nous allons voir comment ajouter/cacher des colonnes et lignes, valoriser les cellules.
Comment modifier un tableau dans WordPress ?
À manipulation du tableau, apporter des options aux cellules, il faudra cliquer sur la cellule puis choisir le bouton adapté :
- Ajouter un lien.
- Insérer une image.
- Ou si tu souhaites aller plus loin, tu pourras modifier le code HTML.
Tu peux assembler des cellules à Combiner des cellules : Par exemple, tu cliques sur le bouton En une colonne (rowspan) et sur la cellule en question, celle-ci va fusionner avec la précédente. Si tu souhaites faire la même chose avec une ligne, tu pourras fusionner des cellules avec le bouton en une ligne (colspan).
Dans cette partie, il te sera possible de masquer, montrer, dupliquer, d’insérer, supprimer des lignes ou des colonnes. Pour ce faire, coche la colonne ou ligne concernée. Tu peux même choisir le nombre de colonne et ligne à insérer :
Voyons ce que ça donne avec les cellules fusionnées :
Mise en forme tableau WordPress
Ensuite, à Option du tableau, permet de modifier des paramètres préprogrammés, par exemple :
- Ligne d’en-tête du tableau : si tu souhaites que la première ligne soit l’en-tête, équivalent en HTML de la balise ‘thead‘.
- Ligne de pied du tableau : très pratique, si ton tableau est très long, celui-ci va rappeler l’en-tête, équivalent en HTML de la balise ‘tfoot’.
- Alterner les couleurs : Afficher une ligne avec un fond blanc, puis la suivante en gris et ainsi de suite. Cela facilite la lecture du tableau.
- Mise en surbrillance du survol d’une ligne : Cela permet de mettre une ligne en avant.
- Montrer le nom du tableau : Nous avons au début donné un nom à notre tableau, tu vas pouvoir l’afficher au-dessus ou en-dessous du tableau ou pas, celui-ci sera affiché en « H2 ».
- Montrer la description du tableau : C’est exactement la même chose mais avec la description que nous avons renseignée au début.
- Classes CSS Additionnelles : Pour faire des modifications sur un script CSS. Nous allons nous occuper du CSS après.
WordPress dynamiser le tableau
Ensuite, à Contenu de la bibliothèque JavaScript DataTables, tu pourras apporter des modifications préprogrammées. Attention, si tu utilises colspan ou rowspan que nous avons vu plus haut, cette partie ne fonctionnera pas. Alors quelles sont les modifications :
- Trier : Pour laisser le choix à l’utilisateur de trier par ordre croissant ou décroissant chaque colonne.
- Ensuite, Chercher/Filtrer : Un champ de recherche sera à la disposition de l’utilisateur. Si dans mon cas je tape « Priya » dans la zone de recherche, seule la ligne avec le mot Priya sera affichée.
- Pagination : Choisir ou non de paginer d’après un nombre de lignes que tu auras déterminé.
- Info : Afficher le nombre de lignes et de pages en tout.
- Défilement horizontal : Pour que notre tableau paraisse moins compressé, même s’il y a encore des choses à faire pour l’améliorer.
- Commandes personnalisées : Le code JavaScript, si tu veux rajouter des fonctionnalités.
Tableau WordPress : TablePress importer
Il t’est possible d’importer (dans TablePress -> Importer un tableau) un tableau avec le plugin TablePress. Tu as le choix entre quatre sources d’importation :
- Fichier
- URL
- Fichier venant d’un serveur
- Enfin, en le faisant de façon manuelle.
Pour le type de format, là aussi tu auras le choix, entre un format HTML ou Excel.
Tu pourras choisir le tableau que tu importes, tu pourras choisir de l’ajouter comme un nouveau tableau, le remplacer par un tableau déjà existant ou de le mettre à la suite d’un tableau que tu as déjà créé.
TablePress : exporter un tableau
Tout d’abord, pour exporter nous allons aller dans TablePress -> Exporter un tableau, dans notre cas ça va être simple, nous avons qu’un seul tableau :
- Tableaux à exporter : Choisi le tableau que tu souhaites exporter, si tu coches Tout sélectionner, ça ne va rien changer puisque nous avons qu’un seul tableau ;).
- Ensuite, à Format d’export : Choisir un format Excel, HTML ou JSON.
- Délimiteur CSV : Si tu choisis CSV, tu pourras choisir entre des points-virgules, virgules ou tabulations.
- Fichier ZIP : Si tu préfères recevoir ton fichier dans une archive ZIP.
Améliorer le tableau avec le CSS
Il est possible d’apporter beaucoup de modifications grâce au CSS. Nous, nous allons juste le rendre plus lisible, cela se passe dans TablePress -> Options :
Première chose que nous allons modifier : Empêcher que les mots se mettent à la ligne dans les cellules, nous allons utiliser l’attribut white-space et la valeur nowrap.
Deuxième chose que nous allons modifier : Créer un espacement dans les cellules avec padding et un espacement de 15px.
Voici le code :
th, td {
white-space: nowrap;
}
th {
padding: 15px !important;
}
Avant :
Maintenant :
C’est toute de même mieux, tu ne trouves pas ?
Ce qu'il faut retenir
TablePress est vraiment un super plugin : il est possible de créer un tableau facilement et rapidement ainsi que de fusionner des cellules en quelques clics, mais pas que, on peut aussi importer et exporter des tableaux sous différents formats et faire des modifications CSS et JavaScript préprogrammées. Cependant, lorsque l’on utilise beaucoup de colonnes ou des cellules avec plusieurs mots, il est préférable d’utiliser un peu de CSS pour rendre la lecture du tableau plus agréable.
Que penses-tu du plugin TablePress ?
