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
Free responsive pricing table startup framework
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
