Faire des tableaux avec TablePress

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

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é.

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 :

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.

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.

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.