Tous les sites Web modernes sont conçus pour fonctionner correctement sur différentes largeurs d’écran. Autrefois, les tableaux étaient créés en utilisant du HTML simple. Alors que la conception Web flexible est devenue la nouvelle norme, les tableaux HTML de base ont eu du mal à répondre aux exigences des sites Web modernes. Étant donné que les simples tableaux HTML ne sont pas réactifs, le texte qu'ils contiennent est extrêmement difficile à lire sur les tailles d'écran mobiles. C'est pourquoi ils sont utilisés pour développer des tableaux réactifs qui adaptent leur mise en page en fonction de la taille de l'écran sur lequel ils sont visualisés. Les requêtes multimédias HTML et CSS doivent être utilisées conjointement.
- Solution 1 : Les tableaux peuvent être créés à l’aide du Divi Builder.
- Solution 2 : utilisez les plugin de table qui incluent cette fonctionnalité par défaut !
- WP Table Manager
- Interface pour le WP Table Manager
- Conclusion
Les tableaux peuvent être construits avec une disposition lisible sur toutes les tailles d'écran pour un ensemble unique d'informations qui n'est ni trop volumineux ni trop diversifié, et cela peut être réalisé avec des approches HTML et CSS de base. Cependant, si le tableau est destiné à contenir une quantité considérable de données, il n'est pas facile de créer une mise en page lisible sur des appareils mobiles ou des écrans d'une largeur inférieure à 786 pixels.
Si le concepteur Web travaillant avec HTML et CSS pour rendre un tableau réactif sur toutes les tailles d'écran ne prend pas en compte la quantité de données, il risque de rencontrer des problèmes qui auront un impact significatif sur la lisibilité du contenu du site. Voici quelques suggestions que vous, en tant que concepteur de sites Web Divi, pourriez mettre en pratique lorsque vous tentez de créer manuellement des tableaux réactifs.
Tout en réduisant la taille du tableau pour s'adapter à un écran plus petit, vous devrez construire plusieurs classes CSS, chaque classe ciblant une résolution d'écran particulière.
Une solution alternative que vous pouvez utiliser consiste à masquer des colonnes spécifiques du tableau lorsque la taille de l'écran est inférieure.
Pour les écrans plus petits, vous pouvez inclure des défilements horizontaux ou verticaux dans les en-têtes et pieds de page du tableau.
Créez un tableau unique qui peut être mis à l'échelle pour s'adapter à toutes les tailles d'écran et effectuez un zoom sur le tableau pour rendre le contenu plus lisible.
Ces solutions demandent beaucoup d’efforts et les exigences peuvent différer en fonction du contenu et de la taille de l’écran.
Solution 1 : Les tableaux peuvent être créés à l’aide du Divi Builder.
Elegant Themes a produit un tutoriel pour montrer comment construire des tableaux réactifs à l'aide des fonctionnalités intégrées de Divi. Vérifiez-le ici. Ils ont ajouté des capacités de défilement horizontal aux colonnes qui débordent du conteneur du tableau, permettant au tableau d'être plus réactif aux entrées de l'utilisateur. Vous pourrez en savoir plus en allant sur la page tutoriel :
Solution 2 : utilisez les plugin de table qui incluent cette fonctionnalité par défaut !
Créer un tableau responsive pour votre site Divi n'est plus un problème, grâce à l'abondance de solutions plugin GRATUITES disponibles dans le repo. Cependant, il est un peu difficile de trouver des plugin de table dotés d'options de réactivité mobile intégrées. Les plugin populaires comme wpDataTables n'ont pas cette fonctionnalité en option gratuite.
Dans cet article, nous considérons l'un des meilleurs plugin WP Tabe Builder.
WP Table Manager
WP Table Manager est le seul plugin de table WordPress qui offre une interface de feuille de calcul complète pour gérer les tables. Créez un tableau, sélectionnez un thème et commencez à modifier les tableaux dès que vous avez terminé de les créer. Vous bénéficierez d'un ensemble complet de fonctionnalités puissantes d'édition de tableaux, notamment l'édition de cellules HTML, la copie de tableaux, le calcul et la synchronisation avec Excel, Google Sheets et Office 365 ; c'est aussi simple que de cliquer sur une cellule et de modifier les données avec ou sans l'aide d'un éditeur de texte visuel pour que l'utilisateur final puisse modifier un tableau.
WP Table Manager vous permet de concevoir des tableaux attrayants et réactifs à l'aide d'une interface visuelle simple. Son utilisation est gratuite. Une fois que vous l'avez activé, vous serez redirigé vers le guide de configuration. Suivez les procédures et effectuez les ajustements nécessaires à votre guise. Comme par magie, vous avez créé un magnifique tableau qui s’affiche magnifiquement sur tous les appareils, quelle que soit leur taille. Il ne vous reste plus qu'à copier le shortcode et à le coller dans la page où vous souhaitez qu'il apparaisse. Le générateur propose actuellement sept éléments (texte, image, liste, bouton, classement par étoiles, code HTML personnalisé et shortcode) que vous pouvez glisser-déposer dans des espaces réservés de tableau à l'aide de la fonction glisser-déposer. Ceux-ci peuvent être utilisés pour créer différents types de tableaux, tels que des tableaux de comparaison de produits, des tableaux de prix, des tableaux de liste, etc. ; c'est le plugin Table que nous avons découvert au cours de notre enquête comme étant le plus convivial pour les novices. Veuillez garder à l'esprit que la version actuelle ne dispose pas de champ de recherche ni de tout autre type de fonctionnalité de filtrage. De plus, si vous avez l’intention de saisir ou de gérer de nombreux ensembles de données, cette option n’est peut-être pas idéale. Pour ce type de scénario d’utilisation, Visualizer ou Tablepress sont tous deux d’excellents choix.
Interface pour le WP Table Manager
Vous pouvez inclure le shortcode dans un module de code ou dans un module de texte dans Divi.
Le thème DIVI inclut le WP Table Manager .
plugin WP Table Manager répond à la gestion des détails en matière de gestion des tables ;
- Une fois l'option de filtrage activée sur votre table, vous pouvez rechercher des données dans chaque colonne et filtrer l'ensemble du tableau. Cela fonctionne également sur des tableaux énormes, y compris la pagination
- Les flèches haut et bas présentées sur chaque colonne organiseront les données de votre tableau. L'ordre des données des tableaux fonctionne également sur des tableaux volumineux, y compris la pagination.
- Une fois que vous avez construit votre tableau avec toutes les données dont vous avez besoin, vous pouvez laisser les utilisateurs trier, mais vous pouvez également établir un ordre par défaut. Cela peut être très utile lorsque les informations changent au fil du temps, car vous pouvez trier les coureurs après la course par ordre d'arrivée.
- La pagination est nécessaire si vous souhaitez afficher un grand tableau sur l'interface de votre site Web tout en conservant les ressources de votre serveur. Sélectionnez un nombre prédéfini de lignes de tableau pour chaque page.
Il existe également un moyen ouvert de gérer des documents Excel via l'importateur de fichiers Excel WP Table Manager . Cependant, vous pouvez uniquement importer et transformer des données Excel sous forme de tableau HTML modifiable ou importer le fichier Excel avec son style comprenant les couleurs, les arrière-plans, la taille des colonnes et les liens.
Gérez votre tableau Excel et publiez-le sur votre site WordPress ! Vous pouvez télécharger un fichier Excel sur le tableau via la gestion des médias WordPress ou un client FTP. Ensuite, sélectionnez votre fichier Excel et lancez la synchronisation depuis les paramètres du tableau.
La synchronisation entre votre tableau WordPress et le fichier Excel peut se faire régulièrement, entre une minute et une journée. Le délai de synchronisation automatique peut également être défini pour éviter les mises à jour indésirables des tables publiques WordPress ou pour économiser les ressources du serveur pour une table énorme.
Après avoir importé une table, toutes les données peuvent être mises à jour ; c'est juste un tableau HTML ordinaire éditable comme un plugin ! Feuille de calcul WordPress.
D'un autre côté, après avoir construit un tableau bien rangé avec toutes les données souhaitées, vous pouvez l'exporter sous forme de fichier Excel conventionnel et, par amp , réexécuter la feuille Excel mise à jour ultérieurement. Vos utilisateurs peuvent désormais exporter le tableau sous forme de feuille Excel sur l’interface WordPress.
Le WP Table Manager se synchronise également avec Office 365 via OneDrive.
L'outil d'importation et d'exportation de fichiers OneDrive Excel est disponible ; gagnez du temps en important et en modifiant vos fichiers en cours de route. Soyez encore plus productif avec la synchronisation de fichiers OneDrive ! Sélectionnez un fichier Excel Office 365 à synchroniser, ajustez-le automatiquement et il est en ligne sur votre site Web.
WP Table Manager vous aide à créer et importer des tabes à partir de la base de données ; il comprend désormais un outil permettant de générer des tableaux à partir d'une sélection de contenus de bases de données de sites Web, qui n'étaient auparavant pas disponibles. Les tables et les colonnes de la base de données sont sélectionnées, des filtres configurables sont appliqués et les tables sont gérées via l'interface WP Table manager . Lorsque la base de données est mise à jour, votre table est automatiquement incrémentée ! De plus, vous disposez d’options de tri, de filtrage, de conception automatique et de pagination.
Si vous n'êtes pas développeur, vous pouvez connecter visuellement n'importe quel élément de base de données à votre tableau HTML. Toutes les tables de votre base de données sont présentées lors de la génération d'une nouvelle table à partir du contenu de la base de données.
La base de données de votre site Web peut effectuer une recherche simple et sélectionner vos tables et colonnes ; c'est très avantageux dans une vaste base de données. De plus, un assistant est là pour vous aider étape par étape avec le tableau de la base de données.
Dans la dernière étape, avant de prévisualiser la table de la base de données, vous pouvez écrire votre requête personnalisée sur les tables de base de données spécifiées. Nous prenons en charge certaines fonctions, comme SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
Une table de base de données comporte parfois plusieurs lignes ; ainsi, cette option peut aider à afficher un tableau qui s'adapte à votre écran. En outre, vous pouvez définir un nombre prédéfini de lignes du tableau pour chaque page. De plus, vous pouvez également choisir une colonne pour trier l'ensemble du tableau par défaut.
La connexion aux tables de la base de données WordPress ne se limite pas aux tables WordPress uniquement. Toutes les tables qui ne proviennent pas de WordPress mais installées sur la même base de données peuvent être connectées.
Parmi les données massives de votre table, vous pouvez créer quelques règles personnalisées pour vous concentrer sur un objet spécifique. Si vous le connaissez, vous pouvez jouer avec les opérateurs de base de données comme >, <, LIKE, IN…
Les tables de la base de données que vous avez créée peuvent être modifiées comme n'importe quelle autre table (si l'utilisateur a accès à cette fonctionnalité sensible) (si l'utilisateur a accès à cette fonctionnalité pratique) ; c'est assez pratique pour éditer par lots certaines données de base de données comme, par amp , plusieurs dates post-publication qui auraient pris un certain temps si elles étaient faites une par une.
Conclusion
Les tableaux sont l’un des moyens les plus efficaces de présenter un ensemble d’informations. Cependant, pour une personne moins technique, créer des tableaux sur une page Web constitue un défi. À l'aide de ces plugin , vous pouvez facilement créer des tableaux lisibles sur n'importe quel appareil en quelques étapes simples. De plus, les tableaux réactifs offriront à coup sûr des expériences globales positives aux visiteurs de votre site. Alors, essayez ceci et faites-nous part de votre expérience dans la section commentaires ci-dessous.
