L'affichage de données tabulaires pose des questions difficiles dans un environnement responsif. Si la table est plus grande que l'écran, on peut permettre un défilement horizontal, cacher des colonnes, montrer un résumé de la table avec un lien vers sa version complète, ou bien encore faire d'autres choix.
Cette première approche de Chris Coyier marche avec seulement du CSS. En-deçà d'une certaine largeur fixe de la table, chaque ligne est transformée en colonne, les en-têtes de la table originale étant répétés sur le côté. Tout se passe comme si la table subissait une rotation de 90 degrés tout en montrant une ligne à la fois. Toutes les données sont encore affichées, bien que cette approche fonctionne mieux avec un petit nombre de lignes et de colonnes.
Un plugin jQuery, Stackable.js, a été développé par John Polacek en suivant les mêmes principes.
David Bushell va un peu plus loin en faisant tourner les tables avec esprit puisqu'il échange les lignes et les colonnes, plaçant la ligne d'en-têtes en première colonne de la table résultante, et en la gardant toujours visible, tandis qu'il ajoute une barre de défilement horizontale pour le reste de la table.
Dans une approche très similaire, Zurb rend fixe la première colonne, permettant le scrolling horizontal du reste des colonnes. Il n'y a pas d'échange entre lignes et colonnes dans leur implémentation CSS/javascript, ainsi les données sont présentées de la même façon sur toutes les tailles d'écran.
Cette démo montre une prévisualisation de la table et un appel à action appuyer pour voir quand il n'y a pas assez d'espace pour afficher la table en entier. L'utilisateur sait ainsi que des données tabulaires sont présentes, libre à lui d'aller les voir sur une autre page ou pas.
En donnant un statut persist, essential ou optional aux colonnes via une classe CSS, et en ajoutant un bouton de menu javascript pour choisir manuellement quelle colonne montrer ou cacher, cet exemple de Filament Group est un bon compromis entre la facilité d'utilisation et la quantité de données à afficher.
Avec son plugin jQuery FooTable, Chris Coyier termine cette série avec un tableau qui peut cacher des colonnes sur des points de rupture spécifiques (media queries CSS), permettre un tri des colonnes et étendre la ligne pour montrer son contenu caché.
Faire tourner les tables
Cette première approche de Chris Coyier marche avec seulement du CSS. En-deçà d'une certaine largeur fixe de la table, chaque ligne est transformée en colonne, les en-têtes de la table originale étant répétés sur le côté. Tout se passe comme si la table subissait une rotation de 90 degrés tout en montrant une ligne à la fois. Toutes les données sont encore affichées, bien que cette approche fonctionne mieux avec un petit nombre de lignes et de colonnes.
Un plugin jQuery, Stackable.js, a été développé par John Polacek en suivant les mêmes principes.
Tables tournantes
David Bushell va un peu plus loin en faisant tourner les tables avec esprit puisqu'il échange les lignes et les colonnes, plaçant la ligne d'en-têtes en première colonne de la table résultante, et en la gardant toujours visible, tandis qu'il ajoute une barre de défilement horizontale pour le reste de la table.
Colonne collée
Dans une approche très similaire, Zurb rend fixe la première colonne, permettant le scrolling horizontal du reste des colonnes. Il n'y a pas d'échange entre lignes et colonnes dans leur implémentation CSS/javascript, ainsi les données sont présentées de la même façon sur toutes les tailles d'écran.
Appuyer pour voir
Cette démo montre une prévisualisation de la table et un appel à action appuyer pour voir quand il n'y a pas assez d'espace pour afficher la table en entier. L'utilisateur sait ainsi que des données tabulaires sont présentes, libre à lui d'aller les voir sur une autre page ou pas.
Des colonnes qui jouent à cache-cache
En donnant un statut persist, essential ou optional aux colonnes via une classe CSS, et en ajoutant un bouton de menu javascript pour choisir manuellement quelle colonne montrer ou cacher, cet exemple de Filament Group est un bon compromis entre la facilité d'utilisation et la quantité de données à afficher.
Coucou le tableau
Avec son plugin jQuery FooTable, Chris Coyier termine cette série avec un tableau qui peut cacher des colonnes sur des points de rupture spécifiques (media queries CSS), permettre un tri des colonnes et étendre la ligne pour montrer son contenu caché.
Illustration : La table tournante : expérience de magnétisme, par Eugène de Mirecourt et Champfleury, 1853
Responsive tables (en anglais)
Tabelas responsivas (en portugais)
Tablas responsivas (en espagnol)
Aucun commentaire:
Enregistrer un commentaire