Dans les premiers temps de la création de sites web, tables ont été conçus principalement pour être visualisés sur un ordinateur de bureau, où l'espace d'affichage était abondant. Lorsque les sites web ont commencé à inclure des données complexes, les tableaux sont devenus un moyen populaire d'organiser proprement de grandes quantités d'informations.
Avec l'essor de l'utilisation mobile, le besoin de tableaux réactifs est devenu vital. De plus en plus d'utilisateurs accèdent aux sites web sur des téléphones et des tablettes, et les tableaux traditionnels sont source de frustration car ils nécessitent un défilement horizontal ou un zoom pour lire le contenu.
Aujourd'hui, les tables réactives ne sont pas seulement pratiques ; elles sont essentielles pour le référencement et l'accessibilité, en particulier avec L'indexation mobile de Google. Bien que le bloc de tableau par défaut de WordPress manque de réactivité intégrée, vous aurez besoin de méthodes telles que des ajustements CSS ou des plugins pour résoudre ce problème.
Dans ce guide, nous verrons la manière la plus simple de créer des tableaux optimisés pour les mobiles dans WordPress à l'aide d'un plugin.
Étape 1 : Installer et activer le plugin Tableberg
La première étape est simple. Rendez-vous sur votre Tableau de bord WordPress et naviguez jusqu'à Plugins > Ajouter un nouveau. Une fois que vous y êtes, tapez Tableberg et trouvez le plugin. Une fois que vous l'avez trouvé, cliquez sur Installer maintenant. Après l'installation, il ne reste plus qu'à Activer il. Cliquez sur Activer pour activer le plugin sur votre site.
Étape 2 : Créer un nouveau tableau avec Tableberg
Dans l'éditeur de WordPress, cliquez sur le bouton icône plus (+), rechercher Tablebergpuis ajouter le bloc Tableberg.
Choisissez le nombre de lignes et de colonnes de votre tableau, puis cliquez sur le bouton "Créer". Pour ce tutoriel, nous avons choisi un tableau contenant 4 lignes et 5 colonnes.
Étape 3 : Ajouter des données à votre tableau
Après création d'un tableauVous accédez alors à l'éditeur de tableau, dans lequel vous pouvez ajouter du contenu à chaque cellule. Cliquez sur n'importe quelle cellule, appuyez sur le bouton le signe plus (+), tapez le bloc requis et continuez à saisir du texte, des images, des listes, des classements par étoiles, des boutons ou tout ce qui correspond à vos besoins.
Étape 4 : Activer les paramètres réactifs
Pour vous assurer que votre tableau s'affiche correctement sur tous les appareils, Tableberg propose un système structuré de gestion de l'information. Paramètres de réactivité section. Tout d'abord, sélectionnez l'option bloc parent, passer à la paramètres sur le côté droit de l'éditeur, puis faites défiler l'écran jusqu'à ce que vous trouviez la rubrique Paramètres de réactivité.
Ensuite, choisissez l'appareil pour lequel vous souhaitez configurer la réactivité. En haut du panneau Paramètres de réactivité, vous trouverez les options suivantes Bureau, Tabletteet Mobile. Sélectionnez l'appareil que vous souhaitez personnaliser, car cela déterminera le comportement du tableau sur cette taille d'écran particulière. Ici, nous avons sélectionné Mobile.
Une fois l'appareil sélectionné, activez l'option Activer le point d'arrêt pour activer le comportement réactif pour l'appareil choisi. Ce paramètre permet au tableau d'appliquer des ajustements réactifs lorsque la largeur de l'écran est égale ou inférieure à la valeur que vous avez définie dans l'option Largeur maximale. Par exemple, si la largeur maximale est fixée à 1024 px, le tableau s'adaptera de manière réactive aux écrans dont la largeur est inférieure à 1024 px. Sous ce paramètre, vous trouverez les options Make En-tête de la rangée supérieure qui désigne la première ligne de votre tableau comme en-tête et applique des styles ou des mises en forme spécifiques pour la distinguer des autres lignes.
Enfin, utilisez la fonction Mode pour choisir la façon dont le tableau se comporte sur les petits écrans. Vous pouvez sélectionner Parchemin pour activer le défilement horizontal et permettre aux utilisateurs de parcourir le tableau s'il est trop large. Vous pouvez également choisir Pile pour réorganiser le contenu du tableau verticalement. Lorsque vous utilisez le mode Pile, des options supplémentaires telles que Direction de la pile vous permettent de contrôler la direction de l'empilement, et Articles par ligne vous permet de définir le nombre d'éléments qui doivent apparaître par ligne afin d'offrir une plus grande personnalisation pour les écrans de petite taille.
Votre tableau est prêt à briller sur les écrans de toutes tailles. Publiez-le et laissez vos données circuler sans problème sur les ordinateurs de bureau, les tablettes et les téléphones !
Conclusion
Les tableaux réactifs ne sont pas seulement une fonctionnalité, ils sont indispensables dans le monde WordPress d'aujourd'hui. Avec Tableberg, vous avez transformé les tableaux traditionnels en quelque chose qui s'adapte, se plie et brille sur n'importe quel écran. Votre site offre désormais un moyen plus propre et plus accessible de présenter les données, qu'elles soient visualisées sur un ordinateur de bureau, une tablette ou un téléphone. Vous pouvez dire adieu aux affichages encombrants et dire bonjour à une expérience utilisateur aussi fluide que votre contenu. Votre public appréciera cette mise à jour, tout comme les moteurs de recherche.
