2 solutions de Responsive Tables en CSS & JavaScript

Vous avez décidé de faire un site en Responsive Design pour qu’il s’adapte automatiquement à la largeur d’écran et donc fonctionne correctement sur tablettes et smartphones. Il est plein de contenu et de liens optimisés pour votre référencement.

Vous utilisez donc une grille flexible, des images flexibles et du code CSS3 Media Queries pour adapter l’emplacement des éléments dans vos pages.

Et là c’est le drame ! Vous devez afficher un tableau de données de 12 colonnes dans vos site Responsive. Comment faire ? Les tableaux, ça ne se linéarise pas très bien (pas du tout même) et en l’affichant partiellement, vous risquez de masquer tout votre contenu optimisé et de limiter votre précieux référencement.

Je vous propose donc deux solutions utilisables pour vos projets sans nuire à l’accessibilité et l’indexation des données de votre tableau.

Première solution (ma préférée) : filament group propose des colonnes qui s’affichent en fonction de la place disponible

C’est tout bête, vous indiquez le niveau d’importance de votre colonne (persist, essential ou optional) et le script affiche/cache cette colonne en fonction de son importance. Par exemple dans un mode smartphone, on affiche seulement les colonnes persist et les colonnes essential.
La liste des colonnes est affichée à l’utilisateur s’il veut surcharger les choix qui ont été fait pour lui. Au niveau du référencement, pas de problème car le contenu est embarqué dans la page.

Exemple de votre tableau responsive sur PC

responsive filament large exemple

Exemple de votre tableau responsive sur iPhone

responsive filament min exemple

Fonctionnalité de surcharge des colonnes affichées / masquées

display des colonnes filament

Explications complètes et guide d’implémentation du responsive table de filament group
ou retrouvez directement la démo du tableau responsive.

Deuxième solution : Zurb propose des tableaux qui scrollent

La solution de Zurb est différente : la première colonne (identifiant votre ligne) reste fixe et les autres colonnes sont toujours visibles avec un scroll à l’intérieur du tableau.

L’avantage de la solution est qu’il est facile de comparer la première colonne avec une des autres colonnes du tableau et les positionnant à côté.
Là encore c’est bonheur pour ton Google bot puisqu’au niveau du référencement, le contenu est visible car il est présent dans le code de la page.

Exemple de votre tableau responsive sur PC

exemple tableau zurb large

Exemple de votre tableau responsive sur iPhone

exemple tableau zurb mini

Explications complètes et guide d’implémentation du responsive table de Zurb
ou retrouvez directement la démo du tableau responsive.

Et vous ? Connaissez vous d’autres solutions responsive pour les tableaux de données ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *