Dans ce nouveau tuto de ma collection nommée "Objectif Frontend" dont le but est de vous donner toutes les clés afin de vous aider à devenir un excellent développeur frontend, je vous propose de découvrir comment rendre un tableau totalement responsive.
Le tableau devra rester cohérent pour l'utilisateur. En effet, l'utilisateur devra comprendre facilement et simplement les données issues du tableau. Pour cela, nous afficherons en permanence les entêtes de chaque colonne du tableau.
Pour les grands écrans, l'entête du tableau apparaîtra qu'une seule fois en haut de chaque colonne, comme il est coutume de le faire pour une présentation compréhensible.
Pour les écrans plus petits, l'entête du tableau se retrouvera à côté de chaque cellule et devra être répété pour chaque ligne du tableau, ainsi l'utilisateur comprendra instantanément à quel entête correspond une donnée.
Pour aller plus loin dans les connaissances utilisées dans ce tutoriel, je vous propose un tuto dédié aux sélecteurs CSS, ainsi qu'un tuto dédié aux datasets.
Table des matières de cette formation CSS, HTML (durée : 42m42s)
-
- Mise en place du tableau en HTML 00:08:04
- Mise en forme du tableau pour les grands écrans 00:09:55
- Mise en forme du tableau pour les petits écrans 00:08:26
- Mise en place des datasets 00:07:37
- Mise en forme des entêtes pour les petits écrans 00:08:40
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Un dernier css, assez subtil, celui-là, avant de revenir au js, puis au fullstack. Et donc à bientôt.
-
En effet c'est un tuto agréable et facile. Et de la nouveauté dans l'apprentissage avec les dataset :-) Il ne reste plus qu'à les connaître avec JavaScript. Par contre faire un tableau responsive quand on a beaucoup de données à y mettre, je ne sais pas si ça peut être agréable à lire sur petit écran. Je vais devoir tester pour le savoir. Merci Carl. Vous nous gâtez.
-
Super facile à suivre et à comprendre. Merci
-
Avec quelles versions de logiciels ce tuto est-il compatible ?CSS 3, HTML 5
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le code source de ce tuto.
note moyenne
avis laissés