Html & Css İle Özelleştirilebilir Bir Dinamik Fiyat Tablosu Nasıl Yapılır?

HTML & CSS ile Özelleştirilebilir Bir Dinamik Fiyat Tablosu Nasıl Yapılır?

Modern web projelerinde kullanıcıların hizmet paketlerini karşılaştırabilmesi için kullanılan fiyat tabloları, dönüşüm oranlarını artıran kritik bileşenlerdir. HTML & CSS ile özelleştirilebilir bir dinamik fiyat tablosu nasıl yapılır sorusu, özellikle kullanıcı deneyimini (UX) ön planda tutan geliştiriciler için temel bir yetkinliktir. Bu rehberde, modern CSS tekniklerini kullanarak, mobil uyumlu ve esnek bir fiyatlandırma arayüzünü sıfırdan oluşturacağız.

Bu makale, web geliştirme temellerine hakim olan ancak CSS Grid ve Flexbox gibi modern yerleşim tekniklerini projelerinde daha verimli kullanmak isteyen geliştiriciler için hazırlanmıştır. Adım adım ilerleyerek, sadece görsel olarak şık değil, aynı zamanda yönetilebilir ve ölçeklenebilir bir yapı inşa etmeyi öğreneceksiniz.

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce modern bir tarayıcı (Chrome, Firefox veya Edge) ve temel bir kod editörü (VS Code önerilir) dışında herhangi bir ek yazılıma ihtiyacınız yoktur. 2026 standartlarına uygun olarak, tüm kodlarımız güncel CSS özellikleri olan 'gap', 'clamp' ve 'CSS Variables' (değişkenler) üzerine kurulacaktır.

Çalışma ortamınızı hazırlarken, projenizin kök dizininde bir index.html ve bir style.css dosyası oluşturun. Kodlarınızı tarayıcıda canlı olarak görmek için VS Code'un "Live Server" eklentisini kullanmanızı şiddetle tavsiye ederim.

Adım 1: Fiyat Tablosunun HTML İskeletini Oluşturma

HTML yapısını kurarken anlamsal (semantic) etiketler kullanmak, SEO ve erişilebilirlik açısından hayati önem taşır. Fiyat tablomuz için section ve div yapılarını kullanarak her bir fiyat kartını tanımlayacağız.

  

    
Başlangıç
    
₺99/ay
    

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

Burada pricing-container ana kapsayıcı, pricing-card ise her bir paketi temsil eden bağımsız bir bileşendir. Bu yapı, ileride JavaScript ile yeni paketler eklemek istediğinizde dinamik olarak çoğaltılabilir bir model sunar.

Adım 2: CSS ile Görsel Tasarım ve Değişken Kullanımı

2026 yılı standartlarında CSS değişkenleri, renk paletlerini ve tipografi ayarlarını tek bir noktadan yönetmemizi sağlar. Bu, projenin özelleştirilebilir olması için en kritik adımdır.

:root {
  --primary-color: #2563eb;
  --card-bg: #ffffff;
  --text-color: #1e293b;
  --border-radius: 12px;
}

.pricing-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

:root içerisinde tanımladığımız değişkenler, tüm projede tutarlılık sağlar. grid-template-columns kullanımı ile tablonun farklı ekran boyutlarında otomatik olarak alt alta veya yan yana gelmesini sağlıyoruz.

Adım 3: Esnek Yerleşim için Flexbox ve Grid Kullanımı

Fiyat tablolarının en büyük sorunu mobil cihazlarda kayma yapmasıdır. CSS Grid, bu sorunu kökten çözer. Aşağıdaki kod ile kartların birbirine göre hizalanmasını ve içeriklerin merkezlenmesini sağlıyoruz.

.pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--border-radius);
  background: var(--card-bg);
  transition: transform 0.3s ease;
}

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

transition özelliği, kullanıcı kartın üzerine geldiğinde (hover) yumuşak bir animasyon gerçekleşmesini sağlar. Bu, arayüzün daha profesyonel hissettirmesine yardımcı olur.

Adım 4: Fiyat Tablosu Yöntemlerinin Karşılaştırılması

Fiyat tablosu oluştururken kullanılan farklı yaklaşımların avantaj ve dezavantajlarını aşağıdaki tabloda inceleyebilirsiniz.

Adım 5: Dinamik Özelleştirme ve İleri Teknikler

Tablonuzu daha dinamik hale getirmek için CSS'in calc() fonksiyonunu ve medya sorgularını kullanabilirsiniz. Örneğin, ekran küçüldüğünde yazı boyutlarını otomatik olarak ölçeklendirmek için:

h3 {
  font-size: clamp(1.2rem, 5vw, 1.8rem);
}

@media (max-width: 768px) {
  .pricing-container {
    padding: 1rem;
  }
}

clamp() fonksiyonu, belirttiğiniz minimum ve maksimum değerler arasında metnin akışkan bir şekilde büyümesini sağlar. Bu, 2026 yılı responsive tasarım anlayışının temelidir.

Güvenlik Uyarısı: Eğer bu fiyat tablosunu bir ödeme sistemi ile entegre edecekseniz, fiyat verilerini asla sadece HTML tarafında tutmayın. Kullanıcı, tarayıcı üzerinden fiyatı manipüle edebilir. Fiyat doğrulamalarını mutlaka sunucu tarafında (Backend) yapın.

Sıkça Sorulan Sorular

Fiyat tablosu neden mobil uyumlu olmalı?

Günümüzde internet trafiğinin %60'ından fazlası mobil cihazlardan gelmektedir. Mobil uyumlu olmayan bir tablo, kullanıcıların sitenizi hemen terk etmesine neden olur.

CSS değişkenleri neden kullanmalıyım?

Tüm sitenin renk şemasını tek bir satırı değiştirerek güncellemenizi sağlar, bu da bakım maliyetini düşürür.

Hover efektleri performansı etkiler mi?

Modern tarayıcılarda donanım hızlandırmalı CSS geçişleri, performansı neredeyse hiç etkilemez.

Dinamik veri nasıl çekilir?

HTML yapısını oluşturduktan sonra, verileri bir JSON dosyasından fetch API'si ile çekerek kartları JavaScript aracılığıyla DOM'a ekleyebilirsiniz.

Hangi tarayıcılar destekleniyor?

Kullandığımız CSS Grid ve Flexbox, güncel tüm modern tarayıcılarda tam desteklenmektedir.

Fiyat Tablolarında Performans Optimizasyonu ve Yükleme Stratejileri

Dinamik fiyat tabloları, özellikle çok sayıda ürün veya karmaşık hesaplamalar içerdiğinde tarayıcı performansını etkileyebilir. Kullanıcı deneyimini en üst düzeyde tutmak için CSS ve HTML tarafında uygulayabileceğiniz bazı kritik optimizasyon teknikleri bulunmaktadır.

Render Sürelerini Kısaltma

Tablo yapınızda çok fazla öğe varsa, tarayıcının "reflow" (yeniden akış) ve "repaint" (yeniden boyama) işlemlerini minimize etmelisiniz. CSS değişkenlerini doğrudan :root üzerinde tanımlamak yerine, sadece ihtiyaç duyulan kapsayıcılarda kullanarak kapsamı daraltın. Ayrıca, karmaşık gölgeler veya bulanıklık (blur) efektleri yerine will-change özelliğini kullanarak tarayıcıya hangi öğelerin animasyona gireceğini önceden bildirebilirsiniz:

.pricing-card {
    will-change: transform;
    transition: transform 0.3s ease;
}

Görsel Varlıkların Yönetimi

Fiyat tablolarında kullanılan ikonlar veya arka plan görselleri için SVG formatını tercih edin. SVG'ler hem ölçeklenebilirdir hem de CSS ile kolayca renklendirilebilir. Büyük boyutlu görseller yerine CSS ile oluşturulmuş şekilleri kullanmak, sayfa yüklenme süresini milisaniyeler bazında düşürecektir.

Hata Ayıklama ve Tarayıcı Geliştirici Araçları İle Test

Fiyat tablonuzun farklı ekran boyutlarında nasıl tepki verdiğini doğrulamak için tarayıcıların "Responsive Design Mode" özelliğini kullanmak yeterli değildir. Gerçek bir hata ayıklama süreci, CSS Grid ve Flexbox'ın sınırlarını zorlamayı gerektirir.

Grid ve Flexbox Hata Ayıklama İpuçları

Tarayıcınızın geliştirici araçlarında (F12) "Elements" sekmesine gidin ve Grid veya Flexbox konteynerlerinin yanındaki küçük etiketlere tıklayın. Bu, tarayıcının boşlukları nasıl hesapladığını ve öğelerin neden taşma yaptığını görselleştirmenizi sağlar. Eğer bir sütun beklenmedik şekilde genişliyorsa, min-width: 0 özelliğini ekleyerek Flexbox'ın varsayılan davranışını sınırlayabilirsiniz:

.price-column {
    display: flex;
    flex-direction: column;
    min-width: 0; /* İçerik taşmasını engellemek için kritik */
}

Erişilebilirlik (A11y) Kontrolleri

Fiyat tabloları, ekran okuyucular için karmaşık yapılar olabilir. Tablonuzun erişilebilir olduğundan emin olmak için şu adımları izleyin:

• Semantik HTML: Tablo başlıkları için

  veya

  yerine, liste yapısı kullanıyorsanız aria-label özelliklerini ihmal etmeyin.

• Renk Kontrastı: Fiyat vurgularında kullandığınız renklerin, arka planla olan kontrast oranının en az 4.5:1 olduğundan emin olun.
• Klavye Navigasyonu: Eğer fiyat tablosunda "Satın Al" gibi butonlar varsa, bu butonlara tabindex="0" ile klavye üzerinden erişilebildiğini test edin.

Bu teknikleri uygulayarak, sadece görsel olarak çekici değil, aynı zamanda teknik açıdan sağlam ve erişilebilir fiyat tabloları oluşturabilirsiniz.

Sonuç

HTML & CSS ile özelleştirilebilir bir dinamik fiyat tablosu oluşturmak, hem görsel becerilerinizi hem de modern CSS tekniklerine olan hakimiyetinizi geliştirir. Bu rehberde öğrendiğiniz Grid, Flexbox ve CSS değişkenleri, gelecekteki tüm arayüz projelerinizin temelini oluşturacaktır. Bir sonraki adım olarak, bu statik yapıyı JavaScript ile bir API'den veri çekecek şekilde güncellemeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kodlar eğitim amaçlıdır. Ticari bir projede kullanırken güvenlik (XSS/SQL Injection) ve performans optimizasyonlarını profesyonel standartlarda gözden geçirmeniz gerektiğini unutmayın.