Comment créer des tableaux HTML avancés dans WordPress sans codage

WordPress reste la plate-forme CMS la plus populaire au monde avec une part de 43 % de l'ensemble du Web. Bien qu'il s'agisse sans aucun doute de l'une des fonctionnalités les plus attrayantes, WordPress n'est pas nécessairement la meilleure plate-forme lorsqu'il s'agit de créer des tableaux HTML sans codage.

Bien que de nombreuses personnes pensent que les tableaux HTML sont obsolètes, ils offrent toujours une excellente valeur au public. En conséquence, la plupart des utilisateurs ont dû embaucher des experts pour la tâche particulière « réservée aux développeurs ». Compte tenu de l'objectif, c'était une grosse déception pour les utilisateurs de WordPress à l'époque.

Gutenberg : l'éditeur par défaut de WordPress avec un bloc de tableau

Lors de l'Europe WordCamp qui s'est tenu en juillet 2017, le fondateur de WordPress, Matt Mullenweg, a annoncé que l'éditeur de blocs Gutenberg était le futur éditeur de WordPress. Pour le plus grand plaisir de nombreux utilisateurs de WordPress, le tout nouvel éditeur a promis d'avoir inclus un bloc tableau intégré.

Cependant, lorsque Gutenberg est arrivé avec WordPress 5.0, l'éditeur a été critiqué pour avoir causé des problèmes de réactivité et d'optimisation sur différents appareils. Néanmoins, l'éditeur est venu avec un bloc de tableau intégré comme promis, permettant aux utilisateurs de créer des tableaux sur leur site Web sans avoir à coder.

Bien que le bloc de tableau Gutenberg soit une option assez pratique pour créer des tableaux HTML sur WordPress, il était à des kilomètres derrière pour devenir une solution efficace de création de tableaux. Il n'offrira pas l'apparence la plus attrayante, n'est pas réutilisable et n'est pas bon pour gérer des bases de données massives.

Gutenberg n'est rien d'autre qu'un simple constructeur de tableaux. Vous ne pouvez pas utiliser Gutenberg pour les fonctionnalités avancées des tableaux HTML telles que le tri, le filtrage ou le style des tableaux. Dans l'ensemble, l'éditeur de blocs Gutenberg est loin de devenir une sorte de constructeur de tableaux avancé.

Par conséquent, il appartenait aux développeurs WordPress en itinérance libre comme nous, WWPManageNinja, de créer un plugin qui ajoute des fonctionnalités de tableau avancées à votre tableau de bord.

Tables Ninja : plugin WordPress de tableau HTML avancé

Même avant l'annonce de Gutenberg, nos développeurs de WPManageNinja travaillaient sans relâche pour proposer un plugin de tableau WordPress fiable qui permettrait aux utilisateurs de créer des tableaux sans aucun problème.

Le 27 février 2018, nous avons publié les tables Ninja sur la boutique de plugins WordPress, et il n'a fallu que quelques mois à Ninja Tabes pour atteindre plus de 30 000 installations actives ! Le soutien et l'appréciation incroyables de nos utilisateurs nous ont également motivés à publier plus de 45 mises à jour de plugins en moins de 2,5 ans depuis la première version, faisant de Ninja Tables le plugin de table WordPress numéro un dans ce processus !

Grâce à ses fonctionnalités dynamiques et à son interface conviviale, Ninja Tables est désormais utilisé par plus de 70 000 sites Web et entreprises.

Ninja Tables est un plugin de visualisation de données qui vous permet de créer une large gamme de tableaux à présenter sur votre site Web. La réactivité, les fonctionnalités, la possibilité de personnalisation et les intégrations tierces en font votre meilleur pari lorsqu'il s'agit d'intégrer ces tableaux HTML avancés difficiles à retirer dans votre site WordPress.

Maintenant, explorons les fonctionnalités de création et de personnalisation de tableaux HTML les plus avancées de Ninja Tables.

• L'interface utilisateur
• Éditeur de tableaux
• Intégrations

L'interface utilisateur

Lors de l'activation, les tables Ninja peuvent être localisées à partir de la barre latérale de votre tableau de bord WordPress. Comme la plupart des plugins WordPress, Ninja Table propose une UI avec plusieurs fonctionnalités. Apprenons-en plus !

• Tous les onglets
• Outils et paramètres
• Aide et documentation

Accueil/Tous les tableaux

Ninja Tables Home a une interface attrayante avec de nouvelles offres. Il vous fournit deux boutons, un pour créer et un pour importer.

Le bouton Créer votre première table vous amène à un générateur de table WordPress manuel, tandis que vous pouvez également importer depuis CSV.

Si vous décidez de créer un tableau à partir de zéro, il vous demandera de fournir un titre et une description dans une fenêtre contextuelle. Vous remarquerez peut-être également plusieurs autres onglets, offrant diverses fonctionnalités d'importation et d'intégration. Cependant, la version gratuite de Ninja Tables vous permettra uniquement d'importer via CSV ou JSON et de l'intégrer à WP Fluent Forms.

Une fois que vous avez fourni un Titre et une Description , cliquez sur le bouton Ajouter pour accéder au générateur de tableau. Si vous n'en avez pas besoin, vous pouvez ignorer la zone de description.

La fonction d'importation fonctionne également de la même manière. Il vous permet de sélectionner un fichier Excel ou tout autre fichier CSV que vous avez créé sur votre ordinateur à télécharger sur votre site Web.

Dans tous les cas, vous vous retrouverez dans l'éditeur de tableau. Notez que vos tableaux créés sont réutilisables et apparaîtront dans la fenêtre d'accueil. Les tables Ninja identifient les tables à l'aide de codes abrégés. Pour utiliser un tableau dans un article ou une page de votre site Web, il vous suffit de copier-coller le shortcode du tableau sur votre page ou votre article.

Outils et paramètres

Outre l'onglet Accueil , Ninja Table comprend également un onglet Outils et paramètres qui permet aux utilisateurs d'importer, de modifier l'apparence globale , de définir les autorisations des utilisateurs et de modifier les paramètres globaux.

L'outil d' importation convient si vous utilisiez déjà un autre plugin de table populaire et que vous êtes passé à Ninja Table. Ninja Table dispose d'une fonction d'importation de tableaux en un clic pour TablePress, Ultimate Tables et Data Tables Generator de Supsystic. Vous pouvez également importer des fichiers CSV dans cet onglet.

Ensuite, l'onglet Apparence globale vous permet de modifier les styles de tableau. Les tables Ninja peuvent improviser vos tables en utilisant trois styles d'interface utilisateur de table différents. Vous pouvez également personnaliser chaque style en fonction de vos préférences et choisir d'autoriser ou non les visiteurs à rechercher et filtrer vos tableaux. Cependant, les règles d'apparence peuvent également être modifiées pour chaque table séparément.

Malheureusement, vous ne pouvez pas définir d' autorisation pour différents utilisateurs principaux, sauf si vous disposez de la version professionnelle de Ninja Tables. L'onglet restant vous permet de sélectionner la manière dont les erreurs Javascript seront gérées et de vider le cache de la table .

Aide et documentation

La large gamme de fonctionnalités des tables Ninja exige une documentation fiable, et notre équipe a préparé tout ce que vous devez savoir sur les tables Ninja.

Notre interface d' aide et de documentation propose un guide de l'utilisateur bien documenté pour une compréhension approfondie de ce que les tables Ninja peuvent faire. Et si vous rencontrez toujours des problèmes, vous pouvez toujours nous contacter en soumettant un ticket d'assistance !

Maintenant que vous en savez plus sur l'interface utilisateur, vous voudrez sûrement créer un tableau ! Alors revenez à la maison et commencez à en créer une !

L'éditeur de tableaux

L'éditeur de table est l'une des choses les plus excitantes de Ninja Tables. Il s'enrichit de certaines des fonctionnalités de création de tableaux HTML les plus avancées, ainsi que de la personnalisation. En cliquant sur le bouton Ajouter ou Importer, vous serez redirigé vers l'éditeur de tables Ninja Tables bien équilibré.

L'interface utilisateur du générateur de tables Ninja Tables se compose des sections affichées ci-dessus. Chaque section de création de tableaux dispose de plusieurs fonctionnalités de personnalisation pour créer et concevoir de magnifiques tableaux HTML WordPress.

Vous pouvez modifier le titre et la description du tableau et définir une légende de tableau en cliquant sur le bouton Modifier en haut. De plus, l'interface utilisateur du générateur de tables Ninja Tables vous permet également de prévisualiser votre table quand vous le souhaitez.

• Lignes du tableau
• Configuration
• Concevoir
• Édition frontale
• CSS personnalisé
• Importer / Exporter

Discutons des fonctions de création de table une par une.

Lignes du tableau

Table Rows est l'un des aspects fondamentaux de tout générateur de tableau HTML sur WordPress. Comme il est dit, vous pouvez commencer en cliquant sur le bouton Ajouter une colonne !

Le bouton ouvrira une fenêtre de création de colonne qui accorde certaines des fonctions de tableau HTML les plus avancées sur WordPress. Ninja Tables n'est pas seulement un constructeur de table de base avec des installations de création de colonnes moyennes ; c'est bien plus que ça.

Ainsi, bien que vous puissiez écrire un titre de colonne, vous pouvez également définir le type de données et les points d' arrêt réactifs (le point d'arrêt réactif vous permet de choisir d'afficher ou non une colonne sur des appareils spécifiques) .

Cependant, la version gratuite limite les téléchargements de champs, d'images et de fichiers sélectionnés et ne vous permet pas de créer des boutons. Néanmoins, le plug-in est doté de fonctionnalités d'ajout de données incroyables telles que le champ HTML , la valeur numérique et le champ de date .

Et si vous recherchez toujours plus de contrôle sur les colonnes de votre tableau, vous pouvez déverrouiller les paramètres avancés , les paramètres conditionnels et la valeur de transformation disponibles dans les autres onglets de personnalisation des colonnes. Consultez la documentation des tables Ninja pour plus d'informations sur leur fonctionnement.

Une fois que vous avez ajouté des colonnes de tableau, un bouton Ajouter des données apparaîtra dans l'éditeur. Il vous permet d'ajouter des données à votre site Web sans effort. Vous pouvez personnaliser les colonnes séparément en cliquant sur l'icône d'engrenage à côté de l'en-tête de colonne et modifier, dupliquer ou supprimer des données à tout moment !

Enfin, la section des lignes du tableau vous permettra également d'effectuer des actions en bloc ou de définir une vue compacte si votre tableau contient de nombreuses données.

Configuration du tableau

L'onglet Configuration du tableau propose une organisation des colonnes par glisser-déposer. Généralement, les tableaux HTML ne peuvent pas être organisés sur WordPress une fois créés.

À cet égard, les tables Ninja ne limitent pas l'organisation des tables. Les lignes du tableau peuvent être organisées par glisser-déposer, tandis que vous pouvez également créer de nouvelles colonnes ou modifier celles qui existent déjà.

L'onglet suivant de l'onglet de configuration des tableaux vous permet de choisir les paramètres de rendu , c'est-à-dire la façon dont vous souhaitez que vos tableaux soient rendus par les navigateurs. Par défaut, vos tableaux seront rendus avec les paramètres de tableau Ajax . Cette fonctionnalité vous permet d'intégrer des bases de données massives sans nuire à la vitesse de votre site Web.

Bien qu'il existe deux options de rendu, vous ne pouvez pas sélectionner les paramètres de tableau avancés à moins que vous n'ayez la version pro. Le tableau avancé peut incorporer certains des champs de tableau les plus avancés, y compris la marge de cellule et les codes abrégés, et convient à l'optimisation du référencement.

Les filtres personnalisés sont une fonction pratique si vous souhaitez inclure un bouton radio, une case à cocher, un sélecteur de date ou diverses autres interfaces utilisateur spécialisées dans votre tableau. Ceux-ci pourraient fournir d'excellentes fonctionnalités d'optimisation de la conversion si vous affichez des produits ou ajoutez plus de données dans les cellules de votre tableau. Cependant, le filtre personnalisé est également une fonctionnalité professionnelle.

La configuration des boutons vous permet d'inclure le bouton d'impression ou d'importation CSV (fonctionnalité Pro). Les paramètres de langue sont utiles si vous souhaitez utiliser une autre langue pour la barre de recherche de votre tableau, l'espace réservé de recherche ou l'en-tête de la liste déroulante de recherche.

Conception de tableaux

Le design de table Ninja Tables est un incroyable personnalisateur visuel. Il comporte trois bibliothèques de styles avec jusqu'à neuf fonctions de personnalisation de style, vous offrant un contrôle visuel maximal sur vos tableaux HTML sur WordPress.

Outre le style, vous pouvez également choisir d'afficher le titre du tableau , la description, la barre de recherche, le filtre de colonne, la ligne d'en-tête, la bordure, etc. sur n'importe quel appareil.

Le style joue un rôle important dans l'attrait visuel d'une table. Cependant, la couleur compte le plus. Les tables Ninja offrent une personnalisation complète des couleurs dans l'onglet Couleur de la table. Vous pouvez tout personnaliser, de la couleur de l'en-tête du tableau aux bordures du tableau, et il n'y a aucune limitation sur les couleurs autorisées.

Et si vous n'arrivez pas à vous décider sur la personnalisation des couleurs, Ninja Table est livré avec treize schémas de couleurs prédéfinis pour vos tables ! Cependant, cette fonctionnalité incroyable nécessite une version premium.

L'onglet de conception de table restant comporte diverses fonctionnalités de personnalisation telles que la pagination, la position de la barre de recherche, la méthode de tri et vous pouvez donner une classe CSS supplémentaire pour la conception de votre table.

Édition frontale

L'édition frontale est une autre raison exemplaire pour laquelle Ninja Tables est plus qu'un plugin de table. Il vous permet d'activer l'édition pour votre utilisateur frontal. Par exemple, si vous avez besoin que vos utilisateurs remplissent les données du tableau, vous pouvez faciliter l'édition frontale. Cependant, la fonction d'édition frontale n'est disponible que sur la version premium.

CSS/JS personnalisé

Le CSS personnalisé vous permet de contrôler l'apparence du HTML sur WordPress, et dans le cas du plugin, il vous donne le contrôle de vos tableaux. Bien que l'article soit destiné aux non-codeurs, connaître CSS et Javascript peut vous offrir un contrôle complet sur l'apparence des tables Ninja.

Importer / Exporter

Encore une fois, la fonction d'importation vous permet d'importer un fichier CSV ou de remplacer un tableau existant via CSV. D'autre part, la fonction d'exportation vous permettra d'enregistrer votre tableau sur un fichier CSV.

Intégrations

Ninja Tables intègre tous les outils et fonctionnalités essentiels pour créer des tableaux HTML sur WordPress sans tracas. Mais les pouvoirs ne se limitent pas à la construction de tables. C'est bien plus qu'un simple plugin de table et il est livré avec plusieurs intégrations incroyables. Le tout offrant de superbes installations !

• Intégration de Fluent Forms
• Postes WP
• WooCommerce
• Feuilles Google
• Graphiques ninjas

Intégration de formulaires fluides

En tant que propriétaire de site Web, vous utilisez probablement un plugin de formulaire sur votre site Web. Et si vous vouliez prendre les entrées du formulaire dans une table ? Ninja Tables prend vos entrées de formulaire pour créer et afficher un tableau sans que vous ayez à faire quoi que ce soit, sauf à configurer le tableau.

WP Fluent Forms est le meilleur plugin de formulaire de contact au monde à l'heure actuelle, et si vous avez utilisé le plugin pour collecter des données auprès de votre public, vous pouvez le prendre dans vos tableaux WordPress sans avoir à faire grand-chose.

Intégration des messages WP

Ninja Tables ne se contente pas de transférer les entrées de votre formulaire de contact vers des tables. Il peut également organiser tous vos articles, produits, pages et bien d'autres dans un tableau en quelques clics. Si vous cherchez à catégoriser vos publications ou vos produits, l'intégration des tables Ninja WP Posts peut réduire considérablement votre travail.

Intégration WooCommerce

WooCommerce est le plugin de boutique WordPress le plus populaire. Cependant, un grand nombre de personnes utilisant WooCommerce signifie également que beaucoup d'entre elles offrent la même expérience utilisateur. Ninja Tables avec intégration WooCommerce est un plugin légendaire qui peut offrir de la diversité sur votre site et de l'efficacité sur votre backend. Il augmente les taux de conversion tout en permettant la gestion de boutique WooCommerce la plus simple ! Ninja Tables est exactement ce dont vous avez besoin pour gérer votre boutique WooCommerce.

Intégration de Google Sheets

C'est incroyable ce que Ninja Tables a caché sous ses manches ! C'est ce que vous pensez, n'est-ce pas ?

Peut-être que Google Sheets fait partie des meilleures options d'intégration que n'importe quel plugin WordPress peut offrir. Google Sheet est la feuille de calcul en ligne la plus populaire avec les fonctionnalités les plus simples. L'application Web possède des fonctionnalités absolument de classe mondiale et, plus important encore, elle est accessible depuis n'importe quel appareil !

Ninja Tables peut se connecter à n'importe quelle feuille Google et afficher ses données sur votre site Web au fur et à mesure que la feuille est mise à jour. Donc, si vous avez besoin de mettre à jour vos tableaux en déplacement, l'intégration des feuilles Google Ninja Tables est une classe de maître absolue !

Intégration des graphiques Ninja

Les tableaux fonctionnent avec des données. Nous dépendons des tableaux WordPress car ils nous montrent des données statistiques. Cependant, nous devons parfois faire preuve d'un peu de créativité et découvrir des moyens graphiques de les montrer. L'intégration de Ninja Charts est la solution idéale pour produire une présentation visuelle des données d'un tableau. Vous voulez voir ce que vous pouvez en faire ? Regardez la vidéo !

Emballer

Avec Ninja Tables, les difficultés de créer des tableaux HTML avancés sur WordPress sont enfin terminées ! C'est la solution unique pour tous les utilisateurs de WordPress qui ont besoin d'afficher de beaux tableaux de données tout en abandonnant les codes HTML.

Créez donc des tables, augmentez l'engagement, améliorez la conversion et faites plus que la construction de tables à l'aide de Ninja Tables.

C'est tout pour aujourd'hui. Je vous souhaite le meilleur.

Co-auteur : Nusrat Fariha

Nusrat est un rédacteur de contenu créatif chez WPManageNinja qui aime travailler sur divers sujets. Et quand elle n'écrit pas, elle lit probablement ses livres préférés !