, ,

WordPress WYSIWYG Table : Créer des tableaux visuellement éditables sans codage

La plupart des utilisateurs de WordPress ne sont pas des développeurs. Les blogueurs, les spécialistes du marketing et les propriétaires de petites entreprises veulent tous créer des tableaux propres et professionnels sans avoir à se plonger dans le code. C'est là que les tableaux WYSIWYG font la différence.

WYSIWYG signifie "What You See Is What You Get" (ce que vous voyez est ce que vous obtenez). Cela signifie que vous construisez et modifiez les tableaux d'une manière qui reflète l'aspect final, comme vous le feriez en travaillant dans un document Word. Si le bloc Table par défaut vous laisse sur votre faim, ce guide est fait pour vous.

Aujourd'hui, je vais vous montrer comment créer un tableau visuellement époustouflant en utilisant le plugin WYSIWYG table builder. Le tableau se trouve ci-dessous.


🔍 Qu'est-ce qu'un tableau WYSIWYG dans WordPress ?

Une table WYSIWYG vous permet de modifier le contenu visuellement, directement dans l'éditeur WordPress. Pas de HTML. Pas de shortcodes. Juste des résultats en temps réel et des commandes intuitives.

Vous obtenez :

  • Edition en temps réel sans rechargement
  • Mise en forme flexible avec des médias riches
  • Une structure par "glisser-déposer
  • Intégration facile d'images, d'icônes et de boutons

C'est le moyen le plus simple de créer des tableaux riches en contenu sans frais techniques.


❌ Pourquoi le bloc de table par défaut de WordPress n'est pas à la hauteur

Le bloc Table intégré fait l'affaire pour les mises en page de base, mais c'est là que ses capacités s'arrêtent :

  • Pas de glisser-déposer pour les lignes ou les colonnes
  • Personnalisation limitée des bordures, de l'espacement ou des couleurs
  • Il n'est pas possible de fusionner ou de diviser des cellules
  • Pas de support pour les médias à l'intérieur des cellules
  • Faible réactivité mobile

Si votre tableau nécessite plus qu'un simple texte, vous vous heurterez rapidement à un mur.


✅ Pourquoi choisir un plugin de tableau WYSIWYG ?

Pour exploiter tout le potentiel de la conception de tables, un plugin visuel de table tel que Tableberg est un choix judicieux. Il vous offre

  • Éditeur visuel: Effectuez les changements au fur et à mesure que vous les voyez - pas d'approximation
  • Glisser-déposer: Le réarrangement des cellules prend quelques secondes
  • Blocs médias: Ajouter des images, des boutons, des icônes et des classements par étoiles
  • Styles personnalisés: Contrôler le remplissage, les bordures, l'alignement et les couleurs des cellules
  • Adaptée aux mobiles: Choisissez la façon dont votre tableau s'affiche sur les petits écrans

Ce type de plugin rend la conception de tableaux riches aussi simple que l'édition d'un article de blog.

Créer de belles tables
Avec l'éditeur de blocs


🚀 Comment créer un tableau WYSIWYG avec Tableberg

Pour créer un tableau WYSIWYG avec Tableberg, nous devons d'abord installer le plugin.

1. Installer le plugin Tableberg

Aller à Plugins (1) > Ajouter un nouveau (2), recherchez "Tableberg" (3) et cliquez sur Installer (4) puis sur Activer.

2. Ajouter un nouveau tableau

Ouvrez un article ou une page où vous souhaitez ajouter le tableau. Cliquez sur le bouton icône plus (+) sur l'éditeur (1). Type Tableberg dans la boîte de recherche (2). Ajouter le bloc à l'éditeur (3).

Définissez le nombre de colonnes et de lignes du tableau. Nous sélectionnerons 3 × 5 pour l'instant, mais elle créera ou supprimera des colonnes et des lignes si nécessaire. Cliquez sur le bouton Créer un tableau à la fin.

Vous verrez bientôt le tableau inséré dans l'éditeur, comme ci-dessous.

Étape 3 : Ajouter du contenu de manière visuelle

A. Insérer du contenu textuel

Placez votre curseur dans les cellules du tableau et tapez ce que vous voulez.

B. Ajouter des images

Maintenant, insérez le bloc d'images pour insérer les images de vos produits en cliquant sur le bouton "+"Vous pouvez télécharger des images ou les sélectionner dans la bibliothèque de médias. Vous pouvez télécharger des images ou les sélectionner dans la médiathèque.

C. Ajouter un classement par étoiles

Ajoutez des étoiles si vous le souhaitez. Les étoiles sont un excellent moyen de démontrer la qualité de vos produits.

D. Ajoutez vos boutons

Les boutons sont un moyen efficace de promouvoir un produit ou un service. Placez-les donc de manière stratégique

Il est également facile de lier un bouton : cliquez sur le bouton, sélectionnez l'option de lien, saisissez votre lien de destination et réglez les attributs du lien.

Vous pouvez ajuster et personnaliser vos boutons à partir du panneau latéral droit.

E. Insérer des icônes

Les icônes permettent d'identifier les fonctionnalités disponibles et celles qui ne le sont pas. L'insertion du bloc d'icônes est identique à celle de n'importe quel autre bloc.

F. Insérer une liste stylisée

La liste stylisée est un autre bloc essentiel qui vous permet d'ajouter simultanément un ensemble de fonctionnalités et d'icônes.

Maintenant, ajoutez vos fonctionnalités. Chaque fois que vous appuyez sur la touche "Entrée" de votre clavier, vous pouvez ajouter de nouvelles fonctionnalités.

Vous pouvez accéder aux options de personnalisation du bloc Liste stylisée sur le côté droit de l'éditeur.

Voici le tableau que j'ai créé en utilisant Tableberg sans personnalisation.

J'ai ajouté quelques couleurs, un padding, une marge et un ruban en haut. Vous trouverez ci-dessous les images de la personnalisation que j'ai effectuée.

Voici les codes de couleur que j'ai utilisés dans le tableau. (Couleur de l'en-tête : #f3f3f3, Couleur de l'arrière-plan des rangs pairs : #3fad3d63, Couleur de l'arrière-plan des rangs impairs : #d1dec8)

Après personnalisation, la version finale est présentée ci-dessous.

Nom du produit

Canon EOS

$1400

Meilleure option

Lumix GH6

$1200

Scellement aux intempéries

Écran tactile LCD

Caractéristiques supplémentaires

  • Autofocus rapide
  • Contrôle Iso élevé
  • Option AWB
  • Autofocus rapide
  • Contrôle Iso élevé
  • Option AWB

Connectivité WIFI

Lorsque vous êtes satisfait, publiez ou mettez à jour la page. Votre tableau visuellement stylisé est maintenant en ligne.


🔄 Autres plugins de tableaux WYSIWYG à considérer

Tandis que Tableberg offre une expérience fluide, basée sur des blocs, mais il existe d'autres options solides en fonction de vos besoins :

  • WP Table Builder - Drag-and-drop, support de contenu flexible, supporte tous les constructeurs de pages.
  • Tables Ninja - Riche en fonctionnalités grâce aux intégrations et à la logique conditionnelle
  • TablePress (avec extensions) - Bon pour les grands ensembles de données

Chacun a des points forts, mais Tableberg est construit pour fonctionner nativement avec Gutenberg et donne la priorité à l'édition visuelle.


💼 Cas d'utilisation pratiques

Les tableaux WYSIWYG sont parfaits pour :

  • Comparaison des prix et analyse des caractéristiques
  • Tableaux d'affiliation avec boutons et évaluations
  • Grilles des membres de l'équipe ou calendriers des événements
  • Catalogues de produits avec des cellules riches en média
  • Ventilations étape par étape de la marche à suivre
  • Résumés de contenu pour les longs articles de blog

Si votre contenu implique une structure ou une comparaison, ces tableaux le rendent plus attrayant et informatif.


Réflexions finales

Construire un beau tableau ne devrait pas être un défi technique. Un plugin WYSIWYG comme Tableberg vous donne la liberté de concevoir des tableaux qui correspondent au style de votre contenu, sans toucher à une seule ligne de code.

Si vous souhaitez afficher des caractéristiques, des comparaisons ou des listes dynamiques, Tableberg vous facilite la tâche.

Prêt à essayer Tableberg ?
Commencez dès aujourd'hui avec Tableberg ➔

En savoir plus !



L'équipe Tableberg

Construire de beaux tableaux WordPress - visuellement !

Dites adieu aux tableaux ennuyeux. Avec Tableberg, vous pouvez créer des tableaux réactifs et interactifs à l'aide de l'éditeur de blocs, sans avoir besoin de code.

Interface Tableberg
🚀 Obtenez le meilleur plugin de bloc de table à 30% OFF !
Texte par défaut de la barre de notification