Modèles de conception de table sur le Web

Les tableaux sont un modèle de conception pour afficher de grandes quantités de données dans des lignes et des colonnes, ce qui les rend efficaces pour effectuer une analyse comparative sur des objets catégoriels. Les tables ont été utilisées à cette fin dès le ^IIe siècle et lorsque le monde a commencé à passer au numérique, les tables sont venues avec nous.

Il était inévitable que le Web prenne en charge l'affichage des données sous forme de tableau. Les tableaux HTML présentent les données tabulaires d'une manière sémantique et structurellement appropriée. Cependant, les styles par défaut des tableaux HTML ne sont pas exactement la chose la plus esthétique que vous ayez jamais vue. En fonction de la conception visuelle souhaitée, des efforts ont été nécessaires sur le front CSS pour embellir ces tableaux. Il y a dix ans, un article avec le "Top 10 CSS Table Designs" a été publié sur Smashing Magazine, et il continue de recevoir beaucoup de trafic à ce jour.

Le Web a beaucoup évolué au cours de la dernière décennie, et il est plus pratique que jamais d'adapter votre site ou votre application à la fenêtre dans laquelle il est visualisé. Cela étant dit, nous devons continuer à faire des choix de conception réfléchis qui ne compromettent pas accessibilité. Étant donné que les tableaux ne semblent pas tomber en disgrâce de si tôt, voyons comment créer des tableaux sur le Web en 2019.

Options CSS uniquement

Si votre ensemble de données n'est pas si volumineux et que des fonctionnalités telles que la pagination et le tri ne sont pas nécessaires, envisagez une option sans JavaScript. Vous pouvez obtenir de très bons résultats qui fonctionnent bien sur toute une gamme de tailles d'écran sans le poids supplémentaire d'une grande bibliothèque.

Malheureusement, sans l'aide de JavaScript pour certaines manipulations DOM sur le front de l'accessibilité, nous n'avons qu'une poignée d'options CSS uniquement. Mais pour de petits ensembles de données, ils sont souvent suffisants.

Option 1 : ne rien faire

Nous allons commencer avec un scénario à faible effort. Si vos données tiennent dans un tableau avec seulement quelques colonnes et beaucoup de lignes, alors un tel tableau est à peu près prêt pour le mobile.

Le problème que vous auriez est probablement d'avoir trop de place sur des écrans plus larges, il peut donc être conseillé de "limiter" la largeur maximale de la table avec une max-width tout en la laissant rétrécir si nécessaire sur un écran étroit.

Ce type de modèle fonctionne mieux si vos données elles-mêmes ne sont pas des lignes et des lignes de texte. S'il s'agit de phrases numériques ou courtes, vous pouvez probablement vous en sortir sans faire grand-chose.

Option 2 : styliser le parchemin

David Bushell a rédigé sa technique pour les tableaux réactifs en 2012, qui impliquait d'invoquer le débordement et de permettre aux utilisateurs de faire défiler pour voir plus de données. On pourrait dire que ce n'est pas exactement une solution réactive, mais techniquement, le conteneur répond à la largeur de la fenêtre.

Regardons d'abord le débordement "de base". Imaginez que j'utilise des guillemets autour de base, car le style des ombres défilantes est tout sauf cela. Pourtant, dans ce cas, "de base" fait référence au fait que la table ne se transforme en aucune façon.

Cette technique pour faire défiler les ombres vient de Roma Komarov et Lea Verou qui s'inspirent mutuellement des idées pour créer de la magie. Cela repose sur l'utilisation de plusieurs dégradés (linéaires et radiaux) comme images d'arrière-plan sur l'élément conteneur et sur l'utilisation background-attachment: local pour positionner l'arrière-plan par rapport à son contenu.

Ce qui est bien avec cette technique, c'est que pour les navigateurs qui ne prennent pas en charge le défilement des ombres, vous pouvez toujours faire défiler le tableau comme d'habitude. Cela ne casse en rien la mise en page.

Une autre option de défilement serait de basculer les en-têtes de tableau d'une configuration de ligne à une configuration de colonne, tout en appliquant un défilement horizontal sur le contenu de l'élément <tbody> . Cette technique exploite le comportement Flexbox pour transformer les lignes du tableau en colonnes.

En appliquant display: flex à la table, cela fait de <thead> et <tbody> les deux enfants flex, qui sont par défaut disposés l'un à côté de l'autre sur la même ligne flex.

Nous faisons également de l'élément <tbody> un conteneur flexible, ce qui fait que tous les éléments <tr> qu'il contient sont également des enfants flexibles disposés sur une seule ligne flexible. Enfin, chaque cellule de tableau doit avoir son affichage défini sur block au lieu de la table-cell par défaut.

L'avantage de cette technique est que les en-têtes sont toujours visibles, comme un effet d'en-tête fixe, afin que les utilisateurs ne perdent pas le contexte lorsqu'ils font défiler les colonnes de données. Une chose à noter est que cette technique entraîne un écart entre l'ordre visuel et source, ce qui rend les choses légèrement peu intuitives.

Saupoudrer de JavaScript

Comme mentionné précédemment, les options de mise en page qui impliquent le morphing du tableau en modifiant les valeurs display ont parfois des implications négatives pour l'accessibilité, qui nécessitent quelques manipulations mineures du DOM pour être rectifiées.

En outre, il existe un certain nombre de conseils d'expérience utilisateur lorsqu'il s'agit de concevoir des tableaux de données d'Andrew Coyle, y compris des fonctionnalités telles que la pagination, le tri, le filtrage, etc. (fonctionnalités qui nécessitent l'activation de JavaScript).

Si vous travaillez avec un jeu de données relativement simple, vous souhaiterez peut-être écrire vos propres fonctions pour certaines de ces fonctionnalités.

Lignes aux blocs, avec correctif d'accessibilité

Autant que je sache, cette technique de table de données réactive est issue de l'article CSS-Tricks "Responsive Data Tables" de Chris Coyier en 2011. Elle a depuis été adaptée et développée par de nombreuses autres personnes.

L'essentiel de cette technique consiste à utiliser une requête multimédia pour basculer la propriété d'affichage de l'élément de table et de ses enfants à block sur une fenêtre d'affichage étroite.

Sur un écran étroit, les en-têtes de tableau sont masqués visuellement, mais existent toujours dans l'arborescence d'accessibilité. En appliquant des attributs de données aux cellules du tableau, nous pouvons ensuite afficher des étiquettes pour les données via CSS, tout en conservant le contenu de l'étiquette dans le HTML. Veuillez vous référer au CodePen ci-dessous pour savoir à quoi ressemblent le balisage et les styles :

La méthode originale applique une largeur sur le pseudo-élément affichant le texte de l'étiquette, mais cela signifie que vous devez connaître la quantité d'espace dont votre étiquette a besoin pour commencer. L'exemple ci-dessus utilise une approche légèrement différente, dans laquelle l'étiquette et les données sont chacune sur des côtés opposés de leur bloc contenant.

Nous pouvons obtenir un tel effet via les marges automatiques dans un contexte de formatage flexible. Si nous définissons la propriété display de chaque élément <td> sur flex, parce que les pseudo-éléments génèrent des boîtes comme s'ils étaient des enfants immédiats de leur élément d'origine, ils deviennent des enfants flex de <td> .

Après cela, il s'agit de définir margin-right: auto sur le pseudo-élément pour pousser le contenu de la cellule vers le bord le plus éloigné de la cellule.

Une autre approche de la mise en page étroite de la fenêtre consiste à utiliser une combinaison de Grid et display: contents . Veuillez noter que l' display: contents des navigateurs pris en charge présente des problèmes d'accessibilité pour le moment, et cette méthode ne doit pas être utilisée en production tant que ces bogues ne sont pas corrigés.

Mais peut-être que vous lisez ceci après que ces bogues ont été résolus, dans ce cas, voici une option de mise en page alternative.

Chaque élément <tr> est défini pour display: grid , et chaque élément <td> est défini pour display: contents . Seuls les enfants immédiats d'un conteneur de grille participent à un contexte de formatage de grille ; dans ce cas, c'est l'élément <td> .

Lorsque display: contents est appliqué au <td> , il est "remplacé" par son contenu, dans ce cas, le pseudo-élément et le <span> dans le <td> deviennent les enfants de la grille à la place.

Ce que j'aime dans cette approche, c'est la possibilité d'utiliser max-content pour dimensionner la colonne de pseudo-éléments, garantissant que la colonne aura toujours la largeur de l'étiquette la plus longue, sans que nous ayons à lui attribuer manuellement une valeur de largeur.

À l'avenir, lorsque les valeurs de dimensionnement de min-content , max-content et fit-content (couvertes par le module CSS Intrinsic & Extrinsic Sizing Module Level 3) seront prises en charge en tant que valeurs générales de width et de height , nous aurons encore plus d'options pour la pose. les choses.

L'inconvénient de cette approche est que vous avez besoin de ce <span> ou <p> supplémentaire autour du contenu de votre cellule de tableau s'il n'en avait pas déjà un, sinon, il n'y aurait aucun moyen de lui appliquer des styles.

Mise en page simple

Cet exemple montre une implémentation de base de la pagination qui a été modifiée à partir de ce CodePen par Gjore Milevski pour paginer sur les lignes du tableau au lieu des divs. Il s'agit d'une extension de l'exemple « styliser le défilement » abordé dans la section précédente.

Du point de vue de la mise en page, Flexbox est très pratique pour positionner les éléments de pagination sur différentes tailles de fenêtres. Différentes conceptions de projet auront des exigences différentes, mais la polyvalence de Flexbox devrait vous permettre de répondre à ces différences en conséquence.

Dans ce cas, la pagination est centrée sur la page et au-dessus du tableau. Les commandes de navigation vers l'arrière et vers l'avant sont placées de chaque côté des indicateurs de page sur les écrans plus larges, mais toutes les quatre apparaissent au-dessus des indicateurs de page sur les écrans étroits.

Nous pouvons le faire en exploitant la propriété order . La réorganisation visuelle du contenu doit toujours être effectuée avec considération, car cette propriété ne modifie pas l'ordre de la source, mais uniquement son apparition sur les écrans.

Tri simple

Cet exemple montre une implémentation de tri de base modifiée à partir de cet extrait de code par Peter Noble pour répondre à la fois au texte et aux chiffres :

Il serait utile d'avoir une sorte d'indicateur de quelle colonne est actuellement triée et dans quel ordre. Nous pouvons le faire avec l'ajout de classes CSS qui peuvent ensuite être stylisées comme vous le souhaitez. Dans ce cas, les symboles indicateurs sont des pseudo-éléments qui sont basculés lorsque l'en-tête cible est cliqué.

Recherche simple

Cet exemple est une fonctionnalité de filtrage de base qui parcourt tout le contenu textuel de chaque cellule de tableau et applique une classe CSS pour masquer toutes les lignes qui ne correspondent pas au champ de saisie de recherche.

Une telle implémentation est relativement naïve, et si votre cas d'utilisation l'exige, il peut être judicieux de rechercher par colonne à la place. Dans ce scénario, il peut être judicieux d'avoir chaque champ d'entrée dans le cadre de la table dans leurs colonnes respectives.

Laissez une bibliothèque s'en occuper

Les extraits de code JavaScript ci-dessus servent à démontrer comment les tables contenant de plus grandes quantités de données peuvent être améliorées pour faciliter la vie des utilisateurs de ces tables. Mais avec des ensembles de données très volumineux, il peut être judicieux d'utiliser une bibliothèque existante pour gérer vos grandes tables.

Le modèle de basculement de colonne est celui dans lequel les colonnes non essentielles sont masquées sur des écrans plus petits. Normalement, je ne suis pas fan du masquage de contenu simplement parce que la fenêtre d'affichage est étroite, mais cette approche de Maggie Costello Wachs de Filament Group résout ce scrupule en fournissant un menu déroulant qui permet aux utilisateurs de basculer les colonnes cachées dans voir.

L'article ci-dessus a été publié en 2011, mais Filament Group a depuis développé une suite complète de plugins de table réactifs connus sous le nom de Tablesaw, qui comprend des fonctionnalités telles que le tri, la sélection de lignes, l'internationalisation, etc.

La fonctionnalité de basculement de colonne dans TableSaw ne dépend plus non plus de jQuery, contrairement aux exemples de l'article d'origine. Tablesaw est l'une des seules bibliothèques que j'ai pu trouver qui ne dépend pas de jQuery pour le moment.

Emballer

Il existe une myriade de modèles de conception de table, et l'approche que vous choisissez dépend fortement du type de données dont vous disposez et du public cible de ces données. En fin de compte, les tableaux sont une méthode d'organisation et de présentation des données. Il est important de déterminer quelles informations sont les plus importantes pour vos utilisateurs et de décider de l'approche qui répond le mieux à leurs besoins.

Lectures complémentaires

• "Tables réactives CSS uniquement", David Bushell
• "Tables accessibles, simples et réactives", Davide Rizzo, CSS-Tricks
• "Mise en page de table réactive", Matt Smith
• "Modèles réactifs : tableaux", Brad Frost
• "Hé, c'est toujours acceptable d'utiliser des tableaux", Adrian Roselli
• "Tables, propriétés d'affichage CSS et ARIA", Adrian Roselli
• "Tableaux de données", Heydon Pickering