Generator tabel cenowych CSS

Szkielet struktury

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">$9 <span>/mo</span></p>
    <p class="tagline">For solo projects.</p>
    <ul class="features">
      <li>3 projects</li>
      <li>10 GB storage</li>
      <li>Community support</li>
    </ul>
    <a class="cta" href="#">Start free</a>
  </article>

  <article class="plan featured">
    <span class="badge">Most popular</span>
    <h3>Pro</h3>
    <p class="price">$29 <span>/mo</span></p>
    <!-- ... -->
  </article>

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

Responsywny grid trzykolumnowy

.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);
}

Połączenie auto-fit z minmax(240px, 1fr) daje układ trzykolumnowy na desktopie i jedną kolumnę na urządzeniach mobilnych, bez konieczności konfigurowania czegokolwiek więcej.

Wyróżniony plan

Sygnały wizualne, które przyciągają wzrok:

• Kolorowa obwódka w kolorze akcentu marki.
• Lekkie uniesienie karty przez ujemny margin-top lub translateY(-4px).
• Większy przycisk CTA, zwykle wypełniony kolorem marki, podczas gdy pozostałe plany mają przycisk obrysowany.
• Plakietka („Najpopularniejszy“, „Najlepsza wartość“) pozycjonowana absolutnie na górze karty.
• Wyższa karta przyciąga wzrok, ale utrudnia porównywanie planów.

Nie stosuj wszystkich naraz, wybierz dwa albo trzy. Zbyt wiele sygnałów spłaszcza hierarchię, zamiast ją budować.

Przełącznik miesięcznie / rocznie

<div class="billing-toggle">
  <button data-active="true">Monthly</button>
  <button>Annual · Save 20%</button>
</div>

Przełącznik zwykle podmienia wartości cen za pomocą kilku linijek JavaScriptu albo korzysta ze stanu :checked przycisku radio. Pokaż procent rabatu lub kwotę oszczędności (np. „Oszczędzasz 20% przy płatności rocznej“) bezpośrednio w etykiecie przełącznika: w wielu tabelach to najbardziej przekonujący pojedynczy element.

Stylowanie wierszy z funkcjami

.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;
}

Funkcje „w pakiecie“ oznaczaj ptaszkiem, a te „poza pakietem“ szarym tekstem albo jasnym krzyżykiem. Nigdy nie przekreślaj samego tekstu bez obniżenia kontrastu, bo przekreślenie zaczyna wtedy działać jak wyróżnienie, a nie jak wykluczenie.

Zadbaj o widoczność CTA

Jedno CTA na plan, spójne wizualnie we wszystkich planach. Różne teksty w poszczególnych planach („Zacznij za darmo“, „Przejdź na Pro“, „Skontaktuj się z działem sprzedaży“) są jak najbardziej w porządku, a nawet pomagają skierować użytkownika do właściwej ścieżki.

Zrób tabelę łatwą do przejrzenia

Użytkownicy rzadko czytają tabelę cenową od lewej do prawej: najpierw skanują ceny, potem przyciski CTA, a dopiero na końcu różnice w funkcjach. Pod to właśnie optymalizuj:

1. Nazwa planu i cena dużą czcionką, u góry karty.
2. CTA widoczne bez przewijania karty.
3. Lista funkcji poniżej. Podkreślaj różnice między planami, zamiast powtarzać te same pozycje w każdej kolumnie.

Lista kontrolna dostępności

• Każdy plan to osobny element <article> z własnym <h3>.
• Plakietka „Najpopularniejszy“ to widoczna etykieta tekstowa, a nie sam kolor (ze względu na osoby z zaburzeniami rozpoznawania barw).
• Przyciski CTA mają opisowy tekst („Rozpocznij okres próbny Pro“), a nie „Kliknij tutaj“.
• Przełącznik okresu rozliczeniowego ma aria-pressed albo semantykę przycisków radio.
• Jeśli przełącznik działa na JavaScripcie, zmianę ceny ogłaszaj przez aria-live="polite".