Tous les sites Web modernes sont conçus pour fonctionner correctement sur une variété de largeurs d'écran. Les tableaux ont été créés en utilisant du HTML simple dans les temps anciens. 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. Parce que les tableaux HTML simples 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 affiché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 des 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 mise en page lisible sur toutes les tailles d'écran pour un seul ensemble d'informations qui n'est pas trop volumineux ou diversifié, et cela peut être accompli 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 construire une mise en page lisible sur des appareils mobiles ou des écrans d'une largeur inférieure à 786 pixels.
Si le web designer travaillant avec HTML et CSS pour rendre un tableau responsive sur toutes les tailles d'écran ne prend pas en compte la quantité de données, il risque de rencontrer des problèmes qui impactent considérablement la lisibilité du contenu du site. Voici quelques suggestions que vous, en tant que concepteur de site Web Divi, pourriez mettre en pratique lorsque vous essayez de créer manuellement des tableaux réactifs.
Tout en réduisant la taille du tableau pour accueillir un écran plus petit, vous devrez créer plusieurs classes CSS, chaque classe ciblant une résolution d'écran particulière.
Une solution alternative que vous pouvez faire consiste à masquer des colonnes spécifiques de la table 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 les 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 agrandissez le tableau pour rendre le matériel 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 de la table, permettant à la table d'être plus réactive aux entrées de l'utilisateur. Vous pouvez en savoir plus en vous rendant sur la page tutoriel :
Solution 2 : utilisez des plugin de table qui incluent cette fonctionnalité par défaut !
Faire un tableau responsive pour votre site Divi n'est plus un problème, grâce à l'abondance de solutions de plugin GRATUITES disponibles dans le repo. Cependant, il est un peu difficile de trouver des plugin 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 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 puissantes fonctionnalités 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 d'éditer des 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 tables attrayantes et réactives à l'aide d'une interface visuelle simple. C'est gratuit à utiliser. Une fois que vous l'avez activé, vous serez redirigé vers le guide d'installation. Suivez les procédures et effectuez les ajustements nécessaires à votre convenance. Comme par magie, vous avez créé une belle table qui s'affiche magnifiquement sur tous les appareils de toutes tailles. Ensuite, tout ce que vous avez à faire est de copier le shortcode et de 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, HTML personnalisé et code court) que vous pouvez faire glisser et déposer dans des espaces réservés de table à 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 n'a pas de champ de recherche ni aucun 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, ce n'est peut-être pas l'option 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 un module de texte dans Divi.
Le thème DIVI comprend le WP Table Manager .
WP Table Manager plugin WP Table Manager répond à la gestion des détails lorsqu'il s'agit de gérer les tables ;
- Une fois l'option de filtrage activée sur votre tableau, vous pouvez rechercher des données dans chaque colonne et filtrer l'ensemble du tableau. Cela fonctionne également sur des tables é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 de table fonctionne également sur des tables volumineuses, y compris la pagination.
- Une fois que vous avez construit votre table 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, chaque page.
Il existe également un moyen ouvert de gérer les documents Excel via l'importateur de fichiers Excel WP Table Manager . Cependant, vous pouvez uniquement importer et transformer des données Excel en tant que 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 la table via la gestion des médias WordPress ou un client FTP. Ensuite, sélectionnez votre fichier Excel et lancez la synchronisation à partir des paramètres de la table.
La synchronisation entre votre table 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 de la table publique 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 ; ce n'est qu'un simple tableau HTML éditable comme un plugin ! Feuille de calcul WordPress.
D'autre part, après avoir construit une table bien rangée , avec toutes les données que vous souhaitez, vous pouvez l' exporter sous forme de fichier Excel classique et, pour les ex amp le, re-exécuter la feuille Excel mis à jour plus tard. 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 Excel OneDrive est disponible ; gagnez du temps en important et en modifiant vos fichiers à la volée. Soyez encore plus productif avec la synchronisation de fichiers OneDrive ! Sélectionnez un fichier Office 365 Excel à synchroniser, ajustez-le automatiquement et il est en ligne sur votre site Web.
WP Table Manager vous aide à créer et à importer des tabulations à partir de la base de données ; il comprend désormais un outil de génération de tableaux à partir d'une sélection de contenus de bases de données de sites Web, qui n'était pas disponible auparavant. 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 du 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 un développeur, vous pouvez connecter visuellement n'importe quel matériel de base de données à votre table 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 simple recherche et sélectionner vos tables et colonnes ; c'est assez bénéfique dans une vaste base de données. De plus, un assistant est là pour vous aider avec la table de la base de données étape par étape.
Dans la dernière étape, avant de prévisualiser la table à partir 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, telles que SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
Une table de base de données comporte parfois de nombreuses 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, chaque page. De plus, vous pouvez également choisir une colonne pour trier l'ensemble du tableau par défaut.
La connexion à la table de la base de données WordPress n'est pas limitée aux seules tables WordPress. Toutes les tables qui ne sont pas issues de WordPress mais installées sur la même base de données peuvent être connectées.
Parmi les données massives sur votre table, vous pouvez créer quelques règles personnalisées pour vous concentrer sur un objet spécifique. Si vous le connaissez bien, 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 modifier par lots des données de base de données comme, par ex amp le, plusieurs dates post-publication qui aurait pris un certain temps si l' on fait par un.
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 est un défi. En utilisant 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-le et faites-nous part de votre expérience dans la section commentaires ci-dessous.
