Objectif Frontend. Comment rendre facilement un tableau responsive
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Objectif Frontend. Comment rendre facilement un tableau responsive

Carl Brison
9,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du tableau en HTML
Leçon 2
Mise en forme du tableau pour les grands écrans
Leçon 3
Mise en forme du tableau pour les petits écrans
Leçon 4
Mise en place des datasets
Leçon 5
Mise en forme des entêtes pour les petits écrans

Plan détaillé du cours

Leçon 1Mise en place du tableau en HTML
08m04s
Leçon 2Mise en forme du tableau pour les grands écrans
09m55s
Leçon 3Mise en forme du tableau pour les petits écrans
08m26s
Leçon 4Mise en place des datasets
07m37s
Leçon 5Mise en forme des entêtes pour les petits écrans
08m40s

Aperçus

Avis des apprenants

Détail des avis
10
Apprenants
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Bernard Chabloz
Bernard Chabloz
Publié le 15/12/2022
Un dernier css, assez subtil, celui-là, avant de revenir au js, puis au fullstack. Et donc à bientôt.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ainsi que votre confiance ;-)
Valérie Arno
Valérie Arno
Publié le 04/12/2022
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.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil Valérie ;-)
Patrick Gianini
Patrick Gianini
Publié le 21/11/2022
Super facile à suivre et à comprendre. Merci
Carl Brison
Carl Brison
Merci beaucoup ;-)))

Vos questions sur le cours

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.

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données