Tableau comparatif pour site

Tableau comparatif pour site: à quoi ça sert

Un tableau comparatif aide le client à choisir entre des offres, produits ou services sans avoir à poser de questions. Écrivez les colonnes et les lignes, en utilisant oui et non pour obtenir ✓ et ✗, et choisissez une colonne à mettre en avant avec une bordure et un badge.

Sur mobile, le tableau défile latéralement avec la première colonne fixe. Le HTML utilise table avec th et scope et un texte masqué Oui et Non à côté des symboles, pour que le lecteur d’écran lise chaque cellule avec le bon en-tête.

Mode d’emploi

1. Écrivez les colonnes séparées par une barre verticale.
2. Écrivez chaque ligne avec la valeur de chaque colonne.
3. Choisissez la mise en avant et copiez le code.

Quand l’utiliser

• Comparer les offres d’un service.
• Comparer des modèles de produits.
• Montrer les différences avec la concurrence.

Questions fréquentes

Que donne-t-il sur mobile ?

Le tableau défile latéralement dans un cadre, et la première colonne, avec le nom de chaque élément, reste fixe pendant le défilement. La personne ne perd ainsi jamais de vue ce qu’elle compare.

Les symboles ✓ et ✗ sont-ils accessibles ?

Chaque symbole s’accompagne d’un texte masqué (Oui ou Non) pour le lecteur d’écran, et le tableau utilise th avec scope sur les lignes et colonnes : chaque cellule est donc annoncée avec le bon en-tête.

À quoi sert la colonne mise en avant ?

À attirer l’attention sur l’option que vous recommandez, avec une bordure et un badge. Utilisez-la sur une seule colonne ; en mettre plusieurs en avant annule l’effet.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires