Générateur de tableau de prix CSS

Structure de base

<section class="pricing">
  <article class="plan">
    <h3>Démarrage</h3>
    <p class="price">9 € <span>/mois</span></p>
    <p class="tagline">Pour des projets solo.</p>
    <ul class="features">
      <li>3 projets</li>
      <li>10 Go de stockage</li>
      <li>Support communautaire</li>
    </ul>
    <a class="cta" href="#">Commencer gratuitement</a>
  </article>

  <article class="plan featured">
    <span class="badge">Le plus populaire</span>
    <h3>Pro</h3>
    <p class="price">29 € <span>/mois</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Équipe</h3>
    <!-- ... -->
  </article>
</section>

Grille responsive à trois colonnes

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

auto-fit + minmax(240px, 1fr) donne une mise en page à trois colonnes sur desktop et une pile à une colonne sur mobile, sans rien d’autre à configurer.

L’offre mise en avant

Les signaux visuels qui attirent l’attention :

• Bordure colorée reprenant la couleur d’accent de la marque.
• Carte légèrement surélevée grâce à un margin-top négatif ou à translateY(-4px).
• Bouton CTA plus grand, en général plein et aux couleurs de la marque, tandis que les autres offres se contentent d’un bouton en contour.
• Badge (“La plus populaire”, “Le meilleur rapport qualité-prix”) positionné en absolu en haut de la carte.
• Carte plus haute pour attirer l’œil, même si cela rend la comparaison entre offres plus difficile.

N’utilisez pas tous ces signaux à la fois : retenez-en deux ou trois. Trop de signaux finissent par aplatir la hiérarchie au lieu de la créer.

Bascule mensuelle / annuelle

<div class="billing-toggle">
  <button data-active="true">Mensuel</button>
  <button>Annuel · Économisez 20%</button>
</div>

La bascule remplace généralement les valeurs de prix via un peu de JavaScript, ou s’appuie sur l’état :checked d’un bouton radio. Affichez le pourcentage de réduction ou l’économie en euros directement dans le libellé de la bascule (par exemple “Annuel · Économisez 20%”) : dans beaucoup de tableaux, c’est l’élément le plus convaincant à lui seul.

Style des lignes de fonctionnalités

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

Utilisez une coche pour ce qui est “inclus”, et du texte grisé ou une croix légère pour ce qui ne l’est pas. Ne barrez jamais le texte sans réduire aussi son contraste : un texte barré bien visible se lit comme une mise en valeur, pas comme une absence.

Gardez le CTA bien visible

Un CTA par offre, visuellement cohérent d’une offre à l’autre. Varier le texte selon l’offre (“Commencer gratuitement”, “Passer à Pro”, “Contacter le service commercial”) ne pose aucun problème et aide même à orienter l’utilisateur vers le bon parcours.

Rendez le tableau facile à parcourir

Les visiteurs lisent rarement un tableau de prix de gauche à droite : ils balayent d’abord les prix, puis les CTA, et seulement ensuite les différences de fonctionnalités. Optimisez pour ce parcours :

1. Nom de l’offre et prix en grand, en haut de la carte.
2. CTA visible sans avoir à faire défiler la carte.
3. Liste des fonctionnalités en dessous. Mettez en avant les différences entre les offres plutôt que de répéter les mêmes fonctionnalités dans chaque colonne.

Check-list d’accessibilité

• Chaque offre est un <article> distinct, avec son propre <h3>.
• Le badge “La plus populaire” est un libellé texte visible, pas seulement une couleur (pour les personnes daltoniennes).
• Les boutons CTA portent un texte explicite (“Démarrer l’essai Pro”) plutôt que “Cliquez ici”.
• La bascule de facturation utilise aria-pressed ou la sémantique des boutons radio.
• Si la bascule est faite en JavaScript, le changement de prix est annoncé via aria-live="polite".