Les tableaux sont un excellent moyen d’organiser les données afin qu’elles soient lisibles. Ils sont parfaits pour afficher les adresses, les caractéristiques des produits, l’inventaire, les horaires, les statistiques, etc. En raison de la nature des tables qui prennent de l’espace pour afficher correctement les données, il est difficile d’agir.

Les tables doivent-elles réagir? Quel est l’inconvénient? Dans cet article, je vais montrer pourquoi les tableaux doivent répondre et explorer certaines méthodes de mise en forme pour les afficher correctement sur n’importe quelle taille d’écran. Les images sont des captures d’écran des outils de développement Google Chrome (cliquez avec le bouton droit sur une page et choisissez Inspecter) pour afficher la page sous forme de différents appareils mobiles dans le thème WordPress gratuit Twenty Seventeen.

Abonnez-vous à notre chaîne Youtube

Pourquoi les tableaux réactifs sont importants pour les sites Web WordPress

L’image ci-dessus montre ce qui se passe lorsqu’un tableau qui ne répond pas est affiché sur un appareil mobile. L’utilisateur doit faire défiler l’écran pour afficher les données. Cela déplacera la page entière comme vous pouvez le voir à partir du titre et du titre de la page. Cela conduit à une détérioration de la conception du site Web et ce n’est pas une bonne expérience utilisateur.

Comme tout autre élément affiché sur un écran, les tableaux doivent être réactifs et s’adapter à la zone d’affichage pour les garder utilisables et lisibles. Les tableaux doivent également s’intégrer dans les mises en page, par ex. B. ceux créés avec Divi ou d’autres thèmes de création de pages, ainsi que des plugins de création de pages.

Le problème est qu’une table a besoin d’une certaine quantité d’espace pour représenter les données. Cet espace est l’espace minimum dont une table a besoin pour afficher correctement ses données. Cela signifie qu’il n’est pas toujours en mesure de s’adapter à la taille de l’écran. Ce qu’il peut faire, cependant, c’est se formater différemment pour qu’il reste utilisable.

Tableaux HTML

L’un des moyens les plus courants de créer des tableaux consiste à utiliser du HTML. Vous pouvez le faire à la main ou avec des plugins tels que TinyMCE Advanced ou des plugins similaires.

TinyMCE Advanced peut facilement créer des tableaux HTML. Marquez simplement le nombre de colonnes et de lignes que vous souhaitez et remplissez vos informations. Les petits tableaux avec seulement quelques colonnes semblent généralement bien sur la plupart des appareils et des tailles d’écran.

Malheureusement, les tableaux ne répondent pas. Lorsque je regarde le tableau sur un appareil mobile ou dans une fenêtre plus petite, une partie du tableau est masquée. Voici à quoi cela ressemble lorsque vous utilisez les outils de développement de Chrome avec un appareil mobile sélectionné. Dans cette vue, l’utilisateur ne peut pas voir les données après la septième cellule. Ce n’est pas une bonne expérience utilisateur.

Les tableaux HTML peuvent répondre aux tailles d’écran, mais ils déchiquettent le contenu et ont débordé sur le petit écran, obligeant les lecteurs à faire glisser le navigateur sur les écrans mobiles. Cela est particulièrement vrai pour les tableaux contenant beaucoup de données telles que du texte long ou des séquences d’images.

Comment créer des tableaux réactifs

Il existe deux façons de créer un tableau réactif: manuellement avec HTML et CSS et à l’aide de plugins. La meilleure option pour le codage manuel est de reformater le tableau afin qu’il puisse être affiché sur plusieurs tailles d’écran en définissant des points d’arrêt. Les plugins créent ce code ou mettent en forme leurs propres tables, selon le type de plugin que vous choisissez.

Le reformatage des tableaux peut les rendre déroulables ou empilables. Le défilement est un moyen acceptable de garder un tableau lisible s’il reste dans la fenêtre sans faire défiler tout l’écran. Vous pouvez définir le point d’arrêt pour que le texte ne se rétrécisse ou ne se réduit jamais. Au lieu de cela, le tableau devient défilant lorsque l’écran atteint le point d’arrêt que vous avez défini.

Ajustements manuels pour les tableaux HTML

Ceci est un tableau créé avec HTML. Notez que lorsque le tableau défile, la page défile également. Vous pouvez voir que l’en-tête et le titre ont changé dans cette image, brisant la conception du site Web. Cela peut être corrigé en utilisant CSS pour définir un point de rupture multimédia.

Utiliser CSS

Dans l’image ci-dessus (sur l’onglet Texte), donnez à votre tableau HTML une classe comme « Responsive ». Ensuite, vous allez ajouter la classe CSS responsive à votre feuille de style. Vous pouvez le faire en l’ajoutant à la feuille de style d’un sous-sujet (dans le tableau de bord allez à Apparence, Editeur, Feuille de style), dans l’éditeur de code CSS à des sujets comme Divi (dans le tableau de bord de Divi, options de sujet et défilement vers le bas) ou dans le CSS supplémentaire dans le personnalisateur de conception.

Insérer ce code dans votre emplacement CSS:

@media only screen and (max-width: 840px) {
table.responsive {
margin-bottom: 0;
overflow: hidden;
overflow-x: scroll;
display: block;
white-space: nowrap;
}
}

Ajustez la largeur maximale (j’ai choisi 840px) pour choisir la taille de l’écran pour le point d’arrêt.

Cela placera le tableau dans une fenêtre déroulante. Notez que l’en-tête reste en place et que le tableau défile dans la fenêtre, préservant la conception de la page.

Cela fonctionne bien pour ceux qui sont familiers avec HTML et CSS, mais la configuration et la résolution des problèmes peuvent prendre un certain temps. Un moyen beaucoup plus rapide et plus simple de rendre vos tables réactives consiste à utiliser un plugin.

Utiliser des plugins

Il existe plusieurs bons plugins pour créer des tables réactives. Avec de nombreux plugins, les tableaux sont créés séparément de la page ou de l’article, puis insérés avec un shortcode. Certains de ces plugins vous permettent de gérer, de réutiliser et d’importer ou d’exporter vos tableaux, tandis que d’autres rendent vos tableaux HTML actuels réactifs.

Voici quelques-uns des plugins les plus populaires avec des exemples de leur fonctionnement.

TablePress

TablePress est l’un des plugins de table les plus populaires avec plus de 500 000 installations actives. Par défaut, TablePress ne répond pas. Heureusement, il existe une solution simple.

Tableaux réactifs pour TablePress est une extension premium qui change les modes d’affichage d’un tableau et vous permet de retourner, de faire défiler et de réduire en fonction du type d’écran que vos lecteurs utilisent.

L’ajout du shortcode de défilement crée une fenêtre de défilement qui contient le tableau afin que l’utilisateur puisse voir toutes les données. Voici un aperçu de la table sur un téléphone.

Le véritable avantage de ce plugin est le mode flip. Dans ce mode, vous pouvez spécifier un point d’arrêt en sélectionnant un périphérique. Cela peut être utilisé avec des sujets comme Divi qui vous permettent de créer plusieurs sections ou lignes pouvant être visualisées en fonction de votre appareil. Choisissez entre un ordinateur de bureau, une tablette, un téléphone ou tout. Dans l’exemple ci-dessus, je les ai tous sélectionnés.

Plus d’information

Table simple

Easy Table est unique en ce sens que vous pouvez placer vos données sous forme de fichiers CVS dans des balises de table de votre contenu et les convertir automatiquement en table. Vous ajustez les attributs et les paramètres dans les options.

Lorsqu’il est affiché dans une fenêtre de réaction, le tableau peut être fait défiler. Il dispose de nombreux paramètres réglables pour contrôler le formatage.

Plus d’information

Fabricant de table

Table Maker est un outil de création de table qui vous permet de choisir entre l’empilement de lignes ou de colonnes. Les tableaux sont créés séparément et placés dans votre contenu à l’aide de codes courts.

Voici à quoi cela ressemble lorsque la pile de colonnes est sélectionnée.

Cet exemple utilise la pile de lignes.

Plus d’information

Tableau réactif pour Magic Liquidizer

Magic Liquidizer ne crée pas de tableaux. Au lieu de cela, il fonctionne avec toutes les tables HTML et vous permet de définir le point d’arrêt auquel vos tables changent de format. Vous pouvez spécifier les tables à l’aide de classes ou d’ID, ou vous pouvez les utiliser globalement à l’aide du paramètre de table par défaut.

Il s’agit d’un tableau HTML standard. Les tables sont automatiquement empilées verticalement.

Plus d’information

Tables de réponses automatiques

Au lieu de vous donner les outils pour créer des tableaux, celui-ci fonctionne avec des tableaux HTML prédéfinis et les rend réactifs. Vous pouvez soit créer une classe CSS à utiliser pour chaque table de votre choix, soit activer les paramètres pour toutes les tables. Vous pouvez définir le point d’arrêt sur n’importe quelle taille de pixel.

Le résultat est une table reformatée lorsque les pixels atteignent le nombre que j’ai défini comme point d’arrêt. J’aime que cela fonctionne sur les tables que j’ai déjà créées.

Plus d’information

Générateur de table de données

Le générateur de tables de données est un générateur de tables réactif par défaut. Les tableaux peuvent être visualisés à l’aide du shortcode standard avec du code PHP dans les fichiers de rubrique ou affichés dans une seule cellule. Il effectue même des calculs comme une feuille de calcul et affiche des graphiques. C’est probablement le plugin le plus puissant de cette liste.

Vous avez le choix entre trois modes de réponse:

  • défaut
  • Masquage automatique de la colonne
  • Défilement horizontal

La valeur par défaut réduit la taille de la table jusqu’à ce qu’elle atteigne le point d’arrêt.

C’est ainsi qu’il formate la table après avoir atteint le point d’arrêt.

Cet exemple utilise des colonnes à masquage automatique. Il place les tableaux dans une fenêtre qui ne défile pas. Au lieu de cela, les utilisateurs peuvent cliquer sur le signe plus vert pour voir le contenu qui n’est pas affiché.

Celui-ci utilise le défilement horizontal. Il est bon de voir que c’est toujours une option.

Plus d’information

Dernières pensées

Les tableaux sont un excellent moyen d’afficher des données sur les sites Web WordPress, mais les rendre réactifs peut être un défi. La réactivité de vos tableaux est tout aussi importante que tout autre élément de conception web afin de donner à vos lecteurs la meilleure expérience utilisateur possible.

En utilisant HTML et CSS, ou l’un de ces six plugins, vous pouvez rendre vos tableaux réactifs et lisibles sans affecter la conception de votre site Web. Entre les deux, vous êtes sûr de trouver les fonctionnalités et les options de mise en page dont vous avez besoin.

Nous aimerions recevoir de vos nouvelles. Quelle est votre façon préférée de rendre une table réactive?

Image sélectionnée via Timashov Sergiy / shutterstock.com





Source link

Recent Posts