Chen Hui Jing est un concepteur et développeur autodidacte ayant un amour démesuré pour CSS. La réduction des lignes de code dans ses projets Web la rend extrêmement heureuse. Elle… Pour en savoir plus sur Huijing …
Les tableaux sont un modèle de conception permettant d'afficher de grandes quantités de données dans des lignes et des colonnes et n'ont pas encore semblé tomber en disgrâce. Voyons comment nous pouvons créer des tableaux sur le web en 2019.
Les tableaux sont un modèle de conception permettant d'afficher de grandes quantités de données en lignes et en colonnes, ce qui les rend efficaces pour la réalisation d'analyses comparatives sur des objets catégoriels . Des tableaux ont été utilisés à cette fin dès le 2 e siècle et lorsque le monde a commencé à passer au numérique, des tableaux nous ont accompagnés.
Il était inévitable que le Web prendrait 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 sur les tableaux HTML ne sont pas exactement ce que vous avez jamais vu de plus esthétique. En fonction de la conception visuelle souhaitée, certains efforts étaient nécessaires sur le front CSS pour assainir ces tableaux. Il y a dix ans, un article avec le « Top 10 CSS Table Designs » a été publié sur le magazine Smashing et il continue à faire l'objet de beaucoup de trafic à ce jour.
Le Web a beaucoup évolué Au cours de la dernière décennie, il est plus pratique que jamais d’adapter votre site ou votre application à la fenêtre dans laquelle il est visualisé. Cela dit, nous devons continuer à faire des choix de conception réfléchis qui ne compromettent pas l’accessibilité . Puisque les tableaux ne semblent pas bientôt perdre leur popularité, voyons comment créer des tableaux sur le Web en 2019.
Options de CSS-Only [19659009] Si votre jeu 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'en avons qu'une poignée. d'options CSS uniquement. Mais pour les petits ensembles de données, elles sont souvent suffisantes.
Option 1: Ne rien faire
Nous allons commencer par un scénario à faible effort. Si vos données entrent dans un tableau avec seulement quelques colonnes et beaucoup de lignes, un tel tableau est prêt à l'emploi dès le début.
Le problème que vous rencontrez est probablement d'avoir trop de place sur des écrans plus larges. Il serait donc conseillé de "coiffer" la largeur maximale du tableau avec un max-width tout en le laissant rétrécir 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. Si elles sont numériques, ou des phrases courtes, vous pouvez probablement vous en tirer sans rien faire.
Option 2: Style The Scroll
David Bushell a écrit sa technique pour les tables réactives en 2012, ce qui impliquait l'appel du débordement et permettait aux utilisateurs de faire défiler l'écran pour afficher plus de données. On pourrait soutenir que ce n'est pas vraiment une solution sensible, mais techniquement, le conteneur répond à la largeur de la fenêtre d'affichage.
tables, permettent aux utilisateurs de faire défiler pour voir plus de données. ( Grand aperçu )
Voyons d’abord le débordement “de base”. Imaginez-moi en utilisant des citations aériennes autour de la base, car le style pour les ombres défilantes est tout sauf. Pourtant, dans ce cas, «basique» fait référence au fait que le tableau ne se transforme en aucun cas.
Cette technique pour faire défiler les ombres provient de Roma Komarov et Lea Verou pour en savoir plus sur chacun d'eux. des idées pour créer de la magie. Elle repose sur l'utilisation de plusieurs dégradés (linéaires et radiaux) en tant qu'images d'arrière-plan sur l'élément contenant et sur l'utilisation de arrière-attachement: local pour positionner l'arrière-plan par rapport à son contenu.
Le bon côté de cette technique est Pour les navigateurs ne prenant pas en charge le défilement des ombres, vous pouvez toujours faire défiler le tableau normalement.
Une autre option de défilement serait de retourner les en-têtes de tableau d’une configuration de rangée à une configuration de colonne, tout en appliquant un défilement horizontal au contenu de l’élément
. Cette technique exploite le comportement de Flexbox pour transformer les lignes du tableau en colonnes.
En appliquant l'affichage : flex au tableau, les deux enfants flexibles
et sont placés par défaut l'un à côté de l'autre. autre sur la même ligne de flex.
Nous faisons également de l’élément
un conteneur de type flex, ce qui en fait tous les éléments
qui le composent, placés ainsi dans une seule ligne de flex. Enfin, l'affichage de chaque cellule de table doit être défini sur block au lieu de la valeur par défaut table-cell .
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 en faisant défiler les colonnes de données. Il est important de noter que cette technique entraîne une divergence entre l’ordre visuel et l’ordre source et que cela rend les choses légèrement peu intuitives.
Saupoudrer du JavaScript
Comme mentionné précédemment, les options de mise en forme qui impliquent de transformer le tableau en modifier les valeurs d'affichage ont parfois des conséquences négatives sur l'accessibilité, ce qui nécessite quelques manipulations mineures du DOM pour être rectifiées
De plus, il existe un certain nombre de conseils relatifs à l'expérience utilisateur pour la conception de tableaux de données de 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 plus simple, peut-être vous voudriez écrire vos propres fonctions pour certaines de ces fonctionnalités.
Rangées vers blocs, avec correctif d'accessibilité
Pour autant que je sache, cette technique de table de données réactive est issue de l'art de CSS-Tricks icle “ Responsive Data Tables ” de Chris Coyier en 2011. Il a depuis été adapté et complété par de nombreux autres.
L'essentiel de cette technique consiste à utiliser une requête multimédia pour inverser la Propriété d'affichage de l'élément de table et de ses enfants dans le bloc dans une fenêtre étroite.
Sur un écran étroit, les en-têtes de table 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 les étiquettes des données via CSS, tout en conservant le contenu de l'étiquette dans le code HTML. Veuillez vous reporter au CodePen ci-dessous pour connaître le style et le style:
La méthode d'origine applique une largeur au 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, l'étiquette et les données se trouvant chacune sur les côtés opposés de leur bloc conteneur
. Nous pouvons obtenir un tel effet via des marges automatiques dans un contexte de formatage flexible. Si nous définissons la propriété display de chaque élément
sur flex, les pseudo-éléments générant des boîtes comme s'ils étaient les enfants immédiats de leur élément d'origine, ils deviennent des enfants flex de l'élément
.
margin-right: auto sur le pseudo-élément pour déplacer le contenu de la cellule vers le bord extrême de la cellule.
Une autre approche de la disposition de la fenêtre d'affichage étroite consiste à combiner les fonctions Grille et display: sommaire . Veuillez noter que display: contents dans les navigateurs de support a des problèmes d'accessibilité pour le moment, et que cette méthode ne devrait pas être utilisée en production tant que ces bugs n'auront pas été corrigés.
Mais peut-être que vous lisez ceci après la résolution de ces bugs, dans ce cas, voici une option de mise en page alternative.
est défini sur . affichage: contenu . Seuls les enfants immédiats d'un conteneur de grille participent à un contexte de mise en forme de grille. dans ce cas, il s’agit de l’élément
.
Lorsque affichage: contents est appliqué à
il est "remplacé" par son contenu, dans ce cas, le pseudo-élément et les dans les
deviennent les enfants de la grille.
Ce que j’aime dans cette approche est la possibilité d’utiliser max-content pour dimensionner la colonne de pseudo-éléments, en veillant à ce que 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 (couvert par le module de dimensionnement CSS Intrinsic & Extrinsic de niveau 3 ) sont pris en charge en tant que général largeur et hauteur ] valeurs, nous aurons encore plus d’options pour exposer les choses.
L’inconvénient de cette approche est que vous avez besoin de ce complément ou [19659067] autour du contenu de votre cellule de tableau si elle n'en avait pas déjà un, sinon, il n'y aurait aucun moyen d'appliquer des styles.
Cet exemple montre une implémentation de base de pagination modifiée this. CodePen de Gjore Milevski pour paginer sur des lignes de table au lieu de div. Il s'agit d'une extension de l'exemple « de style du rouleau » discuté dans la section précédente.
Du point de vue de la disposition, Flexbox est très utile 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 gérer 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 en arrière et en avant sont placées de chaque côté des indicateurs de page sur des écrans plus larges, mais les quatre apparaissent au-dessus des indicateurs de page sur des écrans étroits.
Nous pouvons le faire en levaraging la propriété order . . La réorganisation visuelle du contenu doit toujours être prise en compte, car cette propriété ne ne modifie pas l'ordre des sources, mais uniquement son apparence sur les écrans.
Tri simple
Cet exemple montre une implémentation de tri de base modifiée cet extrait de code de Peter Noble pour répondre à la fois au texte et aux chiffres:
Il serait utile de disposer d'une sorte d'indicateur de la colonne en cours de tri et de son ordre. Nous pouvons le faire avec l’ajout de classes CSS qui peuvent ensuite être stylées comme vous le souhaitez. Dans ce cas, les symboles indicateurs sont des pseudo-éléments qui sont basculés lorsque l'utilisateur clique sur l'en-tête de la cible.
Recherche simple
Cet exemple est une fonctionnalité de filtrage de base qui parcourt tout le contenu textuel de chaque cellule du tableau et applique une Classe CSS pour masquer toutes les lignes qui ne correspondent pas au champ de saisie de la recherche.
Une telle implémentation est relativement naïve et si votre cas d'utilisation le préconise, il pourrait être judicieux d'effectuer une recherche par colonne à la place. Dans ce scénario, il peut être judicieux de placer chaque champ de saisie dans le tableau de leurs colonnes respectives.
Laissez une bibliothèque le gérer
Les extraits de code JavaScript ci-dessus permettent de montrer comment les tableaux contenant de plus grandes quantités de données peut être amélioré pour faciliter la vie des utilisateurs de ces tables. Cependant, avec des jeux de données très volumineux, il peut être judicieux d'utiliser une bibliothèque existante pour gérer vos tables volumineuses.
Le modèle de bascule de colonne permet de masquer des colonnes non essentielles sur des écrans plus petits. Normalement, je ne suis pas fan de la dissimulation de contenu simplement parce que la fenêtre est étroite, mais cette approche de Maggie Costello Wachs de Filament Group résout ce problème. mine en fournissant un menu déroulant qui permet aux utilisateurs de faire basculer les colonnes masquées dans leur affichage.
L'article ci-dessus a été publié en 2011, mais Filament Group a depuis développé une suite complète de plugins de table sensibles appelés . Tablesaw qui inclut des fonctionnalités telles que le tri, la sélection des lignes, l'internationalisation, etc.
La fonctionnalité de basculement de colonne de 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.
Wraping Up
Il existe une myriade de modèles de conception de table, et l’approche que vous choisissez dépend fortement de la type de données dont vous disposez et le public cible pour ces données. En fin de journée, 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 choisir l'approche qui répond le mieux à leurs besoins.
![Un tableau avec quelques colonnes et de nombreuses lignes affichées sur des écrans larges et étroits [19659014] Un tableau avec quelques colonnes et de nombreuses lignes affichées sur des écrans étroits et larges (<a href=](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/245b7836-eef1-43ae-afd0-1d2e0b70d654/resp-tables-1.png)
Grand aperçu )
(ra, il)