TablePress : le plugin pour créer des tableaux sans coder

Parfois, administrer un site WordPress peut être une véritable sinécure par rapport au HTML statique et autres gestionnaires de contenu préhistoriques. Les tâches courantes sont tellement simples à mettre en œuvre que vous avez tendance à accueillir les demandes d’amélioration avec le sourire.

Il existe toutefois certains types de requêtes qui ne manquent jamais de donner immédiatement de l’urticaire à bon nombre de concepteurs de sites : toutes celles qui incluent le mot « tableau ».

C’est que c’est fragile ces petites bêtes ! Une fausse manipulation de rien du tout, comme un « < » ou « > » supprimé par mégarde, et votre page en ligne perd sa belle structure géométrique pour ressembler aux ruines de Pompéi. C’EST TOUT CASSÉ !

Autant dire que si un aventureux vient à me demander d’ajouter une colonne, il s’expose à entendre un ensemble de jurons qui feraient rougir le capitaine Haddock.

Mais tout ça, c’était avant ! Avant que vous ne découvriez l’extension qui vous permet de rester ZEN en toutes circonstances : TablePress. Un plugin qui permet de créer des tableaux dans WordPress sans coder, et de les modifier d’une simple action de glisser-déposer !

Une envie subite d’ajouter un tableau comparatif de vos plans tarifaires ou des fonctionnalités de vos produits phares ? Suivez le guide. À la fin de ce tuto, vous serez en mesure d’ajouter en toute confiance des tableaux dans WordPress.

Initialement rédigé en février 2019, cet article a été mis à jour pour la dernière fois en mars 2022.

Besoin d’un hébergeur pour votre site ?

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

Essayez o2switch

Qu’est-ce que TablePress ?

TablePress est un plugin gratuit et open-source qui permet de créer simplement des tableaux depuis votre interface d’administration WordPress, sans avoir besoin de coder.
Un code court (shortcode) permet ensuite de les ajouter où vous le souhaitez dans votre contenu (article, page, barre latérale, etc.).

Capitalisant sur 800K+ installations actives, et une note globale de 5 étoiles/5 sur le répertoire officiel de WordPress (pour plus de 4 200 avis laissés), pas de doute : c’est l’extension-phare pour créer et gérer vos tableaux.

Le plugin a été créé par Tobias Bäthge, un développeur WordPress allemand spécialiste de l’ingénierie cybernétique. En bon geek, Bäthge a créé TablePress dans une interface similaire à celle d’une feuille Excel.

Quels sont les atouts de TablePress ?

TablePress présente de nombreuses fonctionnalités intéressantes :

• une interface intuitive, qui se gère en glisser-déposer ;
• la possibilité d’intégrer des tableaux dans vos articles, vos pages, ou vos widgets textuels à l’aide d’un code court (shortcode) ;
• une modification facile des données des tableaux, comme dans Excel ;
• l’import et l’export de tableaux aux formats Excel, CSV, JSON et HTML ;
• une synchronisation avec des feuilles Google Sheets ;
• des cellules de tableau qui acceptent des fonctions mathématiques et des formules de calcul ;
• une personnalisation graphique possible via du code CSS.

Comment ajouter un tableau sur WordPress avec le plugin TablePress ?

Une fois TablePress installé et activé, vous verrez un nouvel onglet au nom de l’extension dans le menu d’administration de WordPress.

Pour ajouter un nouveau tableau à votre site WordPress, il vous suffit de cliquer sur TablePress > Ajouter un tableau dans le menu d’administration, ou sur l’onglet « Ajouter » en haut de l’interface TablePress.

Pour créer votre tableau, il vous est demandé de :

• donner un nom à votre tableau. Si vous comptez présenter de nombreux tableaux sur votre site, pensez à lui donner un nom clair et descriptif ;
• proposer une brève description (optionnel). Prenez le temps d’y ajouter les informations qui pourraient vous être utiles ultérieurement ;
• spécifier le nombre de lignes et de colonnes de votre tableau. Si le plugin vous permet facilement d’ajouter et de supprimer ces éléments ultérieurement, je vous recommande toutefois de vous poser quelques instants pour bien lister les informations que vous voulez présenter dans votre tableau. Cette petite étape d’anticipation vous fera gagner beaucoup de temps par la suite.

Cliquez ensuite sur le bouton bleu « Ajouter un tableau », en bas de la page. Vous allez maintenant accéder à l’écran « Modifier le tableau », où vous pouvez éditer votre tableau.

TablePress dispose aussi de deux fonctionnalités pour importer et exporter un tableau existant (via TablePress > Importer un tableau ou TablePress > Exporter un tableau).
Vous pourrez par exemple importer un tableau depuis un fichier CSV, XLS ou XLSX depuis un tableur (par exemple Excel). Enfin, vous pourrez aussi exporter vos tableaux dans d‘autres programmes, comme des tableurs.

Commet éditer la structure et le contenu d’un tableau ?

Faites défiler la page vers le bas jusqu’au bloc « Contenu du Tableau ». Cette section de la page vous permet d’ajouter du contenu, via une saisie ou un copier/coller, directement dans les différentes cellules du tableau.

Avec le glisser-déposer (drag and drop), il est très facile de réorganiser vos lignes et vos colonnes.

Comment enrichir vos tableaux TablePress ?

Avec TablePress, vos tableaux peuvent être enrichis d’images, de liens et même d’informations plus complexes, comme un shortcode, grâce à son éditeur avancé.

Comment ajouter une image à votre tableau TablePress ?

Pour ajouter une image, rien de plus simple. Descendez sur la page jusqu’au bloc « Manipulation du tableau », et cliquez sur « Insérer une image ».

Cliquez ensuite sur la cellule qui doit afficher l’image. Il vous suffit désormais de télécharger une image ou de choisir une image de votre Médiathèque, avant de cliquer sur le bouton bleu « Insérer dans la table » en bas à droite de la fenêtre.

Comment ajouter un lien dans un tableau ?

TablePress vous permet également d’insérer des liens dans votre tableau. Pour ce faire, descendez jusqu’au bloc de « Manipulation du tableau », puis cliquez sur le bouton « Insérer un lien ».

Ensuite, cliquez sur la cellule du tableau à l’endroit où vous voulez que le lien apparaisse. Une fenêtre contextuelle s’affiche, dans laquelle vous pouvez configurer votre lien à l’aide de l’interface WordPress standard :

Comment ajouter un contenu enrichi à votre tableau ?

Vous pouvez aussi insérer un contenu enrichi dans la cellule d’un tableau. TablePress propose également d’insérer du contenu, à partir d’un éditeur avancé. En l’utilisant, vous pourrez ajouter dans la même cellule du texte, avec ou sans liens, ainsi que des images.

Pour trouver l’éditeur avancé, descendez vers le bloc « Manipulation du tableau », et cliquez sur le bouton de même nom.

Cliquez sur la cellule qui doit accueillir le contenu enrichi. Une fenêtre pop-up apparaît dans laquelle vous pourrez paramétrer votre contenu enrichi.

Quelles options supplémentaires pour personnaliser votre tableau ?

Les options du tableau

Cet encart vous permet de définir l’en-tête ou le pied de page de votre tableau, ce qui peut s’avérer utile si jamais celui-ci contient beaucoup de données pour améliorer la lisibilité.

Vous avez également la possibilité d’opter pour des lignes du tableau aux couleurs alternées, mettre en évidence une ligne au survol de la souris, ou encore afficher le titre ou la description de votre tableau.

Enfin, le champ « Classes CSS Additionnelles » vous permettra d’assigner une ou plusieurs classes de votre choix si vous souhaitez le personnaliser en CSS.

La bibliothèque JavaScript DataTables

Les options de cet encart vous permettent de donner la possibilité aux visiteurs de trier, filtrer et rechercher dans votre tableau dynamiquement ou d’activer une pagination.

Vous pouvez tout désactiver si vous n’en avez pas l’utilité.

Le Ptit Bouillon, votre antisèche sur l’actu WordPress

Recevez gratuitement les dernières infos de l’écosystème WordPress tous les 15 jours et créez de meilleurs sites.

Découvrir le Ptit Bouillon

Comment modifier vos tableaux ?

TablePress permet une édition facile de la structure d’un tableau.

Dans l’encart « Manipulation du tableau », vous trouverez les différentes options proposées qui vous permettront d’ajouter, de supprimer, de dupliquer et de masquer des lignes et des colonnes. Il vous est également possible de combiner des cellules en une ligne ou une colonne.

Pour modifier votre tableau, cliquez simplement sur la ligne ou la colonne que vous souhaitez modifier.

Sélectionnez ensuite l’effet approprié. Nous avons, par exemple, choisi ci-dessous d’insérer une nouvelle colonne entre deux colonnes existantes :

Une fois votre tableau complété, n’oubliez surtout pas de cliquer sur le bouton « Enregistrer les modifications », en haut de la page. Nous vous recommandons d’ailleurs de le faire régulièrement, car aucune sauvegarde automatique n’est effectuée.

Comment modifier un ancien tableau ?

Il vous est possible à tout moment de faire évoluer le contenu et la structure d’un des tableaux que vous avez créé.

Pour retrouver la liste des tableaux existants, sélectionnez TablePress > Tous les tableaux dans votre menu WordPress.

Vous pouvez désormais choisir le tableau que vous souhaitez éditer.

Comment insérer un tableau dans un article ou une page ?

Maintenant que votre tableau est créé, il ne vous reste plus qu’à l’insérer dans un article ou une page de votre site WordPress.

Pour ce faire, ouvrez ou créez le document de destination dans lequel vous voulez publier votre tableau, sur l’éditeur de contenu de WordPress (Gutenberg).

Copiez le code court (shortcode) du tableau, disponible dans l’encart « Informations du tableau » :

Pour info, ce code court se présente sous le format suivant : [table id=<the-ID> /]. Chaque tableau présente un identifiant qui lui est propre (le chiffre 2, sur l’exemple ci-dessus).

Collez le code court dans un bloc « Code court » au sein de la publication de votre choix, là où vous le souhaitez dans le contenu :

Voici le résultat sur le site :

Notez que l’affichage peut différer un peu suivant le thème que vous utilisez.

En tout cas, félicitations : vous vous en êtes sorti les doigts dans le nez !

Les fonctionnalités supplémentaires pour aller plus loin avec TablePress

Jusqu’alors, ce tutoriel vous a donné les bases nécessaires pour créer et mettre à jour des tableaux dans WordPress sans avoir à coder. Vous pouvez également lui ajouter des fonctionnalités supplémentaires très utiles.

Une fois que vous maîtrisez les bases, ces tutoriels (en anglais) peuvent vous aider à mettre en œuvre certaines des fonctionnalités les plus intéressantes :

• utiliser des formules dans les cellules, comme sur Excel ;
• personnaliser son tableau avec du CSS, cette foire aux questions vous donne toutes les réponses que vous pouvez vous poser sur les possibilités de personnalisation de vos tableaux.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Découvrir la formation

En bonus : les extensions TablePress

Il est possible d’ajouter encore plus de fonctionnalités à TablePress grâce à une bibliothèque d’une vingtaine d’extensions gratuites ou premium.

Vous trouverez sur le site du plugin, 20 extensions officielles. Voici certaines des plus utiles :

• Tableaux responsive (premium) : pour avoir de beaux tableaux, adaptés à tous les supports (ordinateur de bureau, tablette et mobile). On regrette que ce plugin soit payant, il laisse ainsi une belle opportunité pour un potentiel concurrent… ;
• Shortcode pour appeler le contenu d’une cellule unique : très utile si vous souhaitez publier certains éléments d’un tableau, comme une note moyenne, à différents endroits de votre page ;
• Importation automatique et programmée de tableaux (premium) : super utile si vous mettez à jour vos tableaux avec une solution externe comme Excel par exemple.

Techniquement, la grande majorité extensions dites premium de TablePress peuvent en fait être téléchargées et utilisées gratuitement. En revanche, le développeur Tobias Bäthge vous encourage à faire un don du montant de votre choix pour récompenser son travail.

Quelles autres options pour ajouter un tableau sur WordPress ?

Si TablePress est l’extension la plus populaire et la mieux notée du répertoire officiel pour créer un tableau sur WordPress, il existe d’autres recours pour concevoir un tableau. 

Le bloc Tableau de l’éditeur de contenu de WordPress

Pour commencer, l’éditeur de contenu de WordPress dispose d’un bloc « Tableau » très pratique pour créer un tableau simplement et rapidement dans vos contenus.

Vous pouvez notamment :

• ajouter ou supprimer des lignes ou des colonnes en temps réel ;
• choisir parmi deux styles d’affichage : « par défaut » et « rayures » ;
• modifier la couleur du texte et de l’arrière-plan ;
• attribuer une largeur fixe à vos cellules ; 
• régler la largeur et le style de vos bordures, ainsi que la typographie.

Ce bloc peut suffire pour certains cas de tableaux très basiques, où vous voulez juste présenter des données de manière simple.

Ceux d’entre vous qui souhaitent créer des tableaux plus complexes, réorganisables, ou bien bénéficier de fonctionnalités similaires à Excel préfèreront donc TablePress.

Les constructeurs de page

Autre possibilité pour ajouter un tableau sur WordPress : vous servir d’un constructeur de page (page builder).

Un constructeur de page est un outil qui permet de créer des mises en page riches et complexes pour votre contenu, sans toucher à la moindre ligne de code, en particulier grâce à l’utilisation de modèles prêts à l’emploi. L’édition se fait souvent en glisser-déposer et en temps réel. On vous en présente 10 incontournables dans cet article.

Le plus célèbre d’entre eux est Elementor, qui cumule 5M+ installations actives sur le répertoire officiel. Tout puissant et flexible qu’il soit, Elementor ne propose pas de widget (module) pour façonner un tableau !

Par contre, il est possible de vous servir d’un de ses multiples addons premium pour parvenir à vos fins, à l’image de Crocoblock, ElementsKit ou Ultimate Addons.

Et j’ai peut-être même encore mieux : vous pouvez ajouter simplement un tableau créé avec… TablePress sur Elementor. Il vous suffit, comme sur l’éditeur de contenu, d’ajouter son code court dans le widget Shortcode proposé par Elementor.

Voilà pour Elementor. Évoquons aussi brièvement le Divi Builder, l’autre poids lourd du secteur.

TablePress propose par exemple une extension tierce premium, TablePress Styler by Divi-Modules, qui vous aidera à personnaliser l’apparence visuelle du tableau depuis l’interface du Divi Builder.

Formez-vous à Elementor

Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.

Découvrir la formation

Les autres extensions pour créer un tableau

En dernier recours, si TablePress ne vous convient pas du tout, vous trouverez peut-être votre bonheur avec l’un des plugins de tableaux pour WordPress ci-dessous : 

• WP Table Builder ;
• wpDataTables ;
• Data Tables Generator by Supsystic ;
• Ninja Tables.

Notre avis final sur TablePress

Vous l’avez sans doute déjà compris, je suis une grande fan de TablePress pour plusieurs raisons :

• ce plugin est une excellente option si vous souhaitez ajouter des tableaux avancés à votre site WordPress facilement, sans coder ;
• grâce à ses fonctionnalités, vous serez en mesure de créer rapidement d’élégants tableaux qui vous aideront à présenter de façon synthétique et à trier des données dans un format simple à lire ;
• son interface inspirée d’Excel vous permet d’aller plus loin que les simples tableaux proposés par l’éditeur de contenu de WordPress ;
• et surtout, il permet d’éviter de créer des tableaux en HTML et de passer des heures à triturer du code sans succès.

Si vous aimez le format vidéo, je vous recommande en complément de visionner cette vidéo d’Alex sur TablePress.

Certains menus ont un peu évolué depuis la publication de cette vidéo, mais la structure globale reste identique :

Côté inconvénients, on peut notamment relever que la personnalisation de l’affichage de vos tableaux est assez limitée. Pour un résultat poussé et à votre image, vous devrez passer par du CSS.

Enfin, si l’extension est responsive par défaut, vos tableaux ne s’adapteront pas toujours automatiquement aux différentes tailles d’écrans. Parfois, l’affichage pourra être coupé, par exemple dans le coin droit.

Encore une fois, l’ajout d’un peu de CSS sera parfois recommandé. Vous pourrez aussi utiliser l’extension Responsive Tables, évoquée plus haut, pour résoudre ce problème.

Télécharger TablePress sur le répertoire officiel :

Et vous, utilisez-vous TablePress ? Que pensez-vous de cette extension-phare de l’univers de WordPress ?

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 40000 personnes l'ont fait, pourquoi pas vous ?

Je m'inscris

À propos de l'auteur

Eléonor Biriotti

Une main littéraire dans un gant 2.0 : passionnée de littérature et ancienne professeur de Lettres Modernes, les mots, c'est mon dada ! Désormais Content Manager en freelance, spécialiste de l'Inbound marketing et du BtoB, j'accompagne des entreprises dans leur stratégie webmarketing, et leur rédige des contenus aux petits oignons pour attirer des leads.