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

TUTO Objectif Frontend. Comment rendre facilement un tableau responsive

Carl Brison
8,99€
Acheter maintenant, payer plus tard. En savoir plus

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
08m04
Leçon 2Mise en forme du tableau pour les grands écrans
09m55
Leçon 3Mise en forme du tableau pour les petits écrans
08m26
Leçon 4Mise en place des datasets
07m37
Leçon 5Mise en forme des entêtes pour les petits écrans
08m40

Aperçus

Avis des apprenants

Détail des avis
50
Apprenants
4
Commentaires
5/5
Note moyenne
5/5
4
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 29/01/2025
Merci Carl pour votre cours sur la responsivité des tableaux, l'utilisation des datasets et des sélecteurs. Je n’y aurais jamais pensé, et pourtant, c'est une solution top ! L’approche consistant à masquer le thead en mode mobile et à utiliser data-head avec ::before pour recréer les en-têtes de manière fluide est tout simplement super. De plus, la transition fluide sur la largeur du tableau apporte un vrai confort à l’expérience utilisateur. Je vais quand même revoir les 23 sélecteurs, histoire d’être au top sur le sujet ! Validé 100 % ! 👌
Carl Brison
Carl Brison
Merci beaucoup Alain, c'est vraiment très gentil ;-)
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 ;-)

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.

Payer plus tard

Prix d'achat : 8,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1457 tutos gratuits

Notre politique de protection des données