Html & Css İle Profesyonel Bir Fiyatlandırma Tablosu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce bilgisayarınızda modern bir kod editörü (VS Code gibi) ve güncel bir tarayıcı (Chrome, Firefox veya Edge) yüklü olmalıdır. HTML5 ve CSS3 standartlarını kullanacağımız için herhangi bir ek kütüphaneye (Bootstrap veya Tailwind gibi) ihtiyaç duymadan saf (vanilla) CSS ile ilerleyeceğiz.

• Kod editörü: Visual Studio Code
• Tarayıcı: Chrome veya güncel herhangi bir tarayıcı
• Temel HTML bilgisi: Etiketlerin yapısı
• Temel CSS bilgisi: Seçiciler ve kutu modeli

Adım 1: HTML Yapısını Oluşturma

Fiyatlandırma tablosu için semantik (anlamlı) HTML etiketleri kullanmak, SEO ve erişilebilirlik açısından kritiktir. Bir kapsayıcı (container) içerisine her bir paket için ayrı bir "card" (kart) yapısı kuracağız.

  

    
Başlangıç
    
₺199
    

      
1 Kullanıcı
      
5GB Depolama
    
    Satın Al
  

Burada div etiketlerini kullanarak kartlarımızı grupladık. ul ve li etiketleri ise özellik listesini tanımlamak için en uygun semantik yapıdır.

Adım 2: CSS ile Görsel Tasarımı Şekillendirme

HTML yapısını kurduktan sonra, CSS ile kartlara profesyonel bir görünüm kazandırmamız gerekir. Flexbox kullanarak kartların yan yana dizilmesini sağlayacağız.

.pricing-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 50px;
}

.pricing-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

Burada transition ve transform özellikleri ile kullanıcı fareyi kartın üzerine getirdiğinde hafif bir yükselme efekti ekledik. Bu, etkileşimi artıran modern bir yaklaşımdır.

Adım 3: Responsive (Mobil Uyumlu) Tasarım

2026 yılında bir web sitesinin mobil cihazlarda kusursuz görünmesi zorunludur. Medya sorguları (media queries) ile ekran küçüldüğünde kartların alt alta gelmesini sağlayacağız.

@media (max-width: 768px) {
  .pricing-container {
    flex-direction: column;
    align-items: center;
  }
  .pricing-card {
    width: 90%;
    margin-bottom: 20px;
  }
}

Bu kod, ekran genişliği 768 pikselin altına düştüğünde flex-direction özelliğini değiştirerek kartları dikey hizalar.

Adım 4: Öne Çıkan Paket Tasarımı

Genellikle işletmeler, bir paketi "Popüler" olarak işaretleyerek kullanıcıyı ona yönlendirir. Buna özel bir CSS sınıfı ekleyerek tasarımda öne çıkaralım.

.popular {
  border: 2px solid #007bff;
  background-color: #f8f9ff;
  position: relative;
}

.popular::after {
  content: "En Çok Tercih Edilen";
  position: absolute;
  top: -15px;
  background: #007bff;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}

::after sözde öğesi (pseudo-element) kullanarak ekstra bir HTML etiketi yazmadan "etiket" eklemiş olduk. Bu teknik, DOM ağacını temiz tutar.

Adım 5: Tasarım Yöntemleri Karşılaştırması

Fiyatlandırma tabloları oluştururken kullanabileceğiniz farklı CSS yerleşim yöntemlerini aşağıdaki tabloda inceleyebilirsiniz:

Güvenlik Uyarısı: Fiyatlandırma tablolarında "Satın Al" butonlarına bağlantı verirken, kullanıcıyı doğrudan ödeme sayfasına güvenli (HTTPS) protokolü üzerinden yönlendirdiğinizden emin olun. XSS (Cross-Site Scripting) saldırılarını önlemek için kullanıcıdan gelen verileri asla doğrudan HTML içine enjekte etmeyin.

Sıkça Sorulan Sorular

Fiyatlandırma tablosu için neden tablo (table) etiketi kullanmıyoruz?

HTML table etiketi, verisel tablolar (finansal raporlar vb.) içindir. Fiyatlandırma "kartları" görsel ve etkileşimli öğeler olduğu için div kullanmak CSS ile daha esnek kontrol sağlar.

Mobil uyumluluk için en iyi yöntem hangisidir?

Flexbox ve CSS Grid kullanımı, günümüz standartlarında mobil uyumluluk için en verimli yöntemdir. Media queries ile birleştirildiğinde her türlü cihazda sorunsuz çalışır.

Renk seçimlerinde nelere dikkat etmeliyim?

Kontrast oranı yüksek renkler seçin. Metin rengi ile arka plan rengi arasında okunabilirliği bozmayacak bir zıtlık olmasına özen gösterin.

Kartlara animasyon eklemek performansı düşürür mü?

CSS ile yapılan transition ve transform animasyonları tarayıcı tarafından GPU ile işlenir ve performansı düşürmez. Ancak çok yoğun JavaScript animasyonlarından kaçınmalısınız.

Bu yapı SEO uyumlu mu?

Semantik HTML etiketleri (h3, ul, li) kullandığınız sürece arama motorları içeriğinizi kolayca indeksleyebilir ve SEO açısından olumlu sonuçlar alırsınız.

İleri Seviye İpuçları: JavaScript ile Dinamik Fiyat Geçişi

Fiyatlandırma tablolarınızı bir adım öteye taşımak için kullanıcıların "Aylık" ve "Yıllık" ödeme planları arasında geçiş yapmasını sağlayan bir buton ekleyebilirsiniz. Bu özellik, kullanıcı deneyimini artırırken yıllık abonelik satışlarını teşvik etmek için harika bir yöntemdir.

Aşağıdaki örnek, basit bir JavaScript fonksiyonu ile fiyatları nasıl güncelleyebileceğinizi göstermektedir. Bu yapıyı mevcut HTML yapınızdaki fiyat etiketlerine data-price öznitelikleri ekleyerek entegre edebilirsiniz.

  Aylık
  
  Yıllık


29


function togglePrices() {
  const isYearly = document.getElementById('priceToggle').checked;
  const prices = document.querySelectorAll('.price');
  
  prices.forEach(price => {
    price.innerText = isYearly ? price.dataset.yearly : price.dataset.monthly;
  });
}

Performans Optimizasyonu ve Hata Ayıklama

Fiyatlandırma tabloları genellikle sayfanın en çok dikkat çeken bölümleridir. Bu nedenle, sayfa yüklenme hızını (LCP - Largest Contentful Paint) olumsuz etkilememek için dikkat etmeniz gereken bazı kritik noktalar şunlardır:

• Görsel Kullanımı: Tablolarınızda ikon veya arka plan görseli kullanıyorsanız, bunları mutlaka WebP formatında ve optimize edilmiş olarak sunun.
• CSS Seçicileri: Çok derin CSS seçicilerinden (örneğin: .container .row .col .card .price) kaçının. Bu, tarayıcının stil hesaplama süresini uzatır. Bunun yerine doğrudan sınıf isimleri kullanın.
• Hata Ayıklama (Debugging): Tarayıcı geliştirici araçlarını (F12) kullanarak "Responsive" modunda farklı ekran çözünürlüklerini simüle edin. Özellikle 320px (küçük mobil cihazlar) ve 1440px (geniş ekranlar) arasında kartların kayıp kaymadığını kontrol edin.

Eğer tablolarınızda beklenmedik boşluklar veya hizalama sorunları yaşıyorsanız, box-sizing: border-box; kuralının tüm öğelerinizde tanımlı olduğundan emin olun:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Bu temel kural, padding ve border değerlerinin eleman genişliğini bozmasını engelleyerek, tasarımınızın piksel mükemmeliyetinde kalmasını sağlar. Hataları ayıklarken outline: 1px solid red; stilini geçici olarak kapsayıcı öğelere eklemek, hangi öğenin alanı dışına taştığını görmenize yardımcı olacaktır.

Sonuç

HTML & CSS ile profesyonel bir fiyatlandırma tablosu yapmak, temel yapı taşlarını doğru birleştirmekten geçer. Bu rehberde öğrendiğiniz Flexbox yerleşimi, responsive tasarım kuralları ve pseudo-element kullanımı, modern web projelerinizde size büyük hız kazandıracaktır. Bir sonraki adım olarak, bu tabloya bir JavaScript fonksiyonu ekleyerek "Aylık/Yıllık" fiyat geçişi (toggle) özelliğini geliştirmeyi deneyebilirsiniz.

Kod güvenliği sorumluluk reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanacağınız ödeme sistemleri ve veri girişleri için mutlaka güncel güvenlik kütüphaneleri ve sunucu taraflı doğrulama yöntemleri kullanın.