Tableau comparatif responsive

Depuis le dernier article concernant les tableaux comparatifs, 10 tables de prix HTML / CSS en 2013, quelques technologies se sont imposées et surtout, le responsive qui est aujourd’hui incontournable. Pour un projet récent, j’ai du faire quelques recherches pour rendre mes tableaux adaptables aux différents écrans.

La liste ci dessous permet d’obtenir plusieurs types de présentations pour différents objectifs : simple tableau comparatif responsive, affichage de données et formatage des informations en fonction de la taille écran.

Flat pricing tables for twitter bootstrap

tableau comparatif responsive

Responsive Flip Pricing Table

tableau prix responsive

Free responsive pricing table startup framework

free responsive table

Free responsive pricing table

Free responsive pricing table

Responsive Table

responsive table

Responsive Table 2

responsive table 2

Pure CSS Responsive Accordion Table

Pure CSS Responsive Accordion Table

Tableau comparatif responsive et table de données

Les quatres premières ressources permettent d’afficher des tables de prix. Option qui s’est maintenant démocratisée et que l’on voit sur beaucoup de site. Ces ressources s’adaptent parfaitement à tous les écrans, ce qui a été LE critère pour être sélectionnées dans cette liste. La deuxième ressource,  Responsive Flip Pricing Table, fait le même travail mais apporte une petite originalité : vous pourrez afficher des prix mensuels ou annuels en glissant l’option au dessus du tableau. Un effet « flip-flap » des plus classes est lancé. J’avoue que ce dernier m’a beaucoup intéressé.

Et les trois dernières ressources, quant à elles, permettent de présenter des tableaux de chiffre. Le principe est de « déplacer » les entêtes de colonnes sur la gauche quand l’espace d’affichage devient trop petit. Toutes les informations sont alors disposés en colonne et restent ainsi toujours lisibles. Simple et efficace. L’effet « accordéon » de la dernière ressource permet de « compresser » les informations et l’internaute n’aura pas besoin de scroller jusqu’en bas de l’écran pour tout lire.

Licence : voir fichier avec la ressource

4 Comments

  1. Olivier Consultant 5 avril 2016
    • FreeTools 5 avril 2016
  2. Plombier paris 12 avril 2016
  3. Maree 21 mars 2017

Leave a Reply