مولد جدول تسعير CSS

الهيكل الأساسي

<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>

شبكة متجاوبة من ثلاثة أعمدة

.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) تخطيطًا من ثلاثة أعمدة على شاشات سطح المكتب، وعمودًا واحدًا متراصًا على الهاتف المحمول، دون أي إعداد إضافي.

الخطة المُبرَزة

إشارات بصرية تجذب الانتباه:

• إطار ملوّن بلون علامتك التجارية.
• رفع بسيط للبطاقة عبر هامش علوي سالب أو translateY(-4px).
• زر CTA أكبر حجمًا، بلون العلامة التجارية عادةً، بينما تكتفي الخطط الأخرى بزر بإطار فقط.
• شارة (“الأكثر رواجًا”، “الأفضل قيمة”) بتموضع مطلق في أعلى البطاقة.
• ارتفاع أكبر لجذب العين، رغم أن ذلك قد يصعّب المقارنة بين الخطط.

لا تستخدم هذه الإشارات كلها معًا، بل اختر اثنتين أو ثلاثًا. كثرة الإشارات تُلغي التسلسل البصري بدل أن تعززه.

التبديل بين الشهري والسنوي

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

يبدّل هذا الزر قيم الأسعار عادةً عبر بضعة أسطر من JavaScript، أو بالاعتماد على حالة :checked في زر اختيار (radio). اعرض نسبة الخصم أو قيمة التوفير ضمن نص الزر، فهو أكثر العناصر إقناعًا في كثير من الجداول.

تنسيق صفوف الميزات

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

استخدم علامة صح للميزات “المشمولة”، ونصًا رماديًا باهتًا أو علامة خطأ خفيفة للميزات “غير المشمولة”. لا تشطب النص وحده دون خفض التباين، وإلا بدا الشطب وكأنه تأكيد لا استبعاد.

أبقِ زر الحث على الشراء بارزًا

زر CTA واحد لكل خطة، متسق بصريًا في كل البطاقات. اختلاف النص من خطة إلى أخرى (“ابدأ مجانًا”، “اشترك في Pro”، “تحدث إلى فريق المبيعات”) أمر جيد، بل يساعد على توجيه المستخدم إلى المسار المناسب.

اجعله سهل التصفح

نادرًا ما يقرأ المستخدمون جداول التسعير سطرًا سطرًا؛ فهم يتصفحون الأسعار أولًا، ثم أزرار الحث على الشراء، ثم الفروق بين الميزات. هيّئ الجدول لهذا السلوك:

1. اسم الخطة والسعر بحجم كبير في أعلى البطاقة.
2. زر CTA ظاهر دون الحاجة إلى تمرير البطاقة.
3. قائمة الميزات أسفل ذلك. أبرِز الفروق بين الخطط بدلًا من تكرار الميزات المشتركة في كل عمود.

قائمة تحقق لإمكانية الوصول

• كل خطة داخل عنصر <article> مستقل وله عنوان <h3> خاص به.
• شارة “الأكثر رواجًا” شارة نصية مرئية، لا يقتصر تمييزها على اللون (مراعاةً لعمى الألوان).
• أزرار CTA تحمل نصًا وصفيًا (“ابدأ تجربة خطة Pro”) بدلًا من “انقر هنا”.
• زر تبديل الفوترة يستخدم aria-pressed أو دلالات أزرار الاختيار (radio).
• عند تغيّر الأسعار بالتبديل، أعلن عنها عبر aria-live="polite" إذا نفّذت التبديل بـ JavaScript.