Html & Css İle Özelleştirilebilir Bir İçerik Karşılaştırma Tablosu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için sadece modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve bir metin editörü (VS Code gibi) yeterlidir. 2026 standartlarında, CSS Grid ve Flexbox teknolojilerini kullanarak tablonun esnekliğini sağlayacağız. Eski yöntem olan "float" veya "display: table" gibi hantal yapıları kullanmaktan kaçınacağız.

• Modern bir kod editörü (VS Code önerilir).
• Tarayıcı geliştirici araçları (F12) ile canlı test imkanı.
• Temel düzeyde CSS Box Model bilgisi.

Temel HTML Yapısını Oluşturma

Karşılaştırma tablosunun iskeletini oluştururken anlamsal (semantic) HTML etiketleri kullanmak, SEO ve erişilebilirlik açısından hayati önem taşır. table, thead, tbody ve tr etiketlerini kullanarak verilerimizi düzenli bir hiyerarşiye oturtuyoruz.

  

    

      
Özellik
      
Başlangıç
      
Profesyonel
    
  
  

    

      
Depolama
      
10 GB
      
100 GB
    
  

Burada thead başlıkları, tbody ise karşılaştırılan verileri kapsar. Bu yapı, ekran okuyucuların tabloyu doğru yorumlamasını sağlar.

CSS ile Tabloyu Şekillendirme

Tablonun görsel kalitesini artırmak için modern CSS özelliklerini kullanıyoruz. "Border-collapse" özelliği sayesinde hücre kenarlıklarının birleşmesini sağlayarak daha temiz bir görünüm elde ediyoruz. Ayrıca, kullanıcıların satırları daha rahat takip edebilmesi için "zebra" deseni (alternatif satır renklendirme) uyguluyoruz.

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: sans-serif;
}
.comparison-table th, .comparison-table td {
  padding: 15px;
  border: 1px solid #ddd;
  text-align: center;
}
.comparison-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

Bu CSS kuralları, tablonun genişliğini kapsayıcısına göre %100 yaparken, hücre iç boşluklarını ve kenarlıklarını standartlaştırır.

Mobil Uyumluluk ve Responsiveness

Mobil cihazlarda büyük tablolar genellikle ekran dışına taşar. Bunu engellemek için CSS'de overflow-x: auto özelliğini kullanacağız. Ayrıca, küçük ekranlarda tabloyu dikey bir liste gibi göstermek yerine, kaydırılabilir bir yapı sunmak 2026 standartlarında en iyi kullanıcı deneyimi yöntemidir.

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  .comparison-table th, .comparison-table td {
    padding: 10px;
    font-size: 14px;
  }
}

table-wrapper sınıfına sahip bir div içine tablonuzu alarak, mobil cihazlarda yatay kaydırma çubuğunun otomatik çıkmasını sağlayabilirsiniz.

İleri Seviye Özelleştirme: Vurgu ve İkonlar

Kullanıcıların en iyi seçeneği görmesi için "Profesyonel" sütununu vurgulamak isteyebilirsiniz. Bunun için CSS'de spesifik bir sınıf tanımlayarak sütunu öne çıkarabiliriz. Ayrıca, onay (check) ikonları ekleyerek tabloyu daha görsel hale getirmek mümkündür.

.highlight {
  background-color: #e8f5e9 !important;
  border-top: 3px solid #4caf50;
}
.icon-check {
  color: green;
  font-weight: bold;
}

Bu sınıfları td etiketlerine uygulayarak, belirli hücrelerin diğerlerinden farklı görünmesini sağlayabilirsiniz.

Karşılaştırma Yöntemleri ve Özellikleri

Güvenlik Uyarısı: Kullanıcıdan gelen verileri (örneğin bir form aracılığıyla) doğrudan tabloya yazdırıyorsanız, XSS (Cross-Site Scripting) saldırılarına karşı mutlaka veri temizleme (sanitization) işlemi yapmalısınız. HTML etiketlerini doğrudan veritabanından çekip tabloya basmak güvenlik açığı yaratabilir.

Sıkça Sorulan Sorular

Tabloyu dinamik olarak nasıl güncelleyebilirim?

Tabloyu dinamik güncellemek için sunucu taraflı diller (PHP, Node.js gibi) kullanarak veritabanından veri çekip döngü (loop) ile tablo satırlarını oluşturmanız gerekmektedir.

Mobil cihazlarda tablo neden bozuluyor?

Tablonun kapsayıcı genişliği, içindeki hücrelerin toplam genişliğinden küçükse bozulma yaşanır. overflow-x: auto kullanarak bu sorunu kolayca çözebilirsiniz.

CSS ile tabloya nasıl animasyon eklerim?

CSS transition özelliğini kullanarak hover durumunda satırların rengini yumuşak bir şekilde değiştirebilirsiniz.

Neden div yerine table etiketi kullanmalıyım?

table etiketi, verilerin ilişkisel olduğunu tarayıcılara ve arama motorlarına bildiren anlamsal bir etikettir. Veri karşılaştırmalarında en doğru yöntem budur.

Erişilebilirlik için ne yapmalıyım?

Tablonun içine caption etiketi ekleyerek tablonun ne hakkında olduğunu belirtebilir ve scope="col" niteliklerini kullanarak başlıkları tanımlayabilirsiniz.

Performans Optimizasyonu ve Büyük Veri Setleri

Tablolarınızda çok sayıda satır ve sütun kullanıyorsanız, tarayıcıların bu verileri işleme biçimi performans üzerinde doğrudan etkiye sahiptir. Özellikle mobil cihazlarda DOM (Document Object Model) üzerindeki yükü azaltmak için CSS content-visibility özelliğini kullanmak, ekran dışındaki tabloların render edilmesini geciktirerek sayfa açılış hızını ciddi oranda artırır.

Büyük veri setleri için şu CSS optimizasyonunu uygulayabilirsiniz:

.comparison-table {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
  table-layout: fixed;
  width: 100%;
}

table-layout: fixed kullanımı, tarayıcının tüm tablo içeriğini analiz etmeden sütun genişliklerini belirlemesini sağlar. Bu, özellikle karmaşık karşılaştırma tablolarında "layout shift" (düzen kayması) sorununu ortadan kaldırarak kullanıcı deneyimini iyileştirir.

Hata Ayıklama ve Tarayıcı Uyumluluk Testleri

Tablo yapısı oluştururken en sık karşılaşılan hatalardan biri, colspan veya rowspan kullanımı sırasında oluşan hücre kaymalarıdır. Bu tür yapısal hataları tespit etmek için tarayıcı geliştirici araçlarını kullanırken "Computed" sekmesini incelemek hayat kurtarıcıdır.

Geliştirme Sürecinde Dikkat Edilmesi Gerekenler:

• Hücre Hizalamaları: vertical-align: middle kullanarak hücre içindeki içeriklerin her zaman ortalı kalmasını sağlayın.
• Taşma Kontrolü: İçerik hücreye sığmadığında overflow: hidden ve text-overflow: ellipsis kullanarak tablonun bozulmasını engelleyin.
• Gölge Efektleri: Vurgulanan sütunlarda box-shadow kullanırken, performans kaybını önlemek için will-change: transform özelliğini tercih edin.

Aşağıdaki örnek, hücre taşmalarını yönetmek için kullanılan güvenli bir CSS yapısıdır:

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

td:hover {
  white-space: normal;
  overflow: visible;
  background: #f9f9f9;
}

Bu yöntem, kullanıcı farenin imlecini hücre üzerine getirdiğinde içeriğin tamamını görmesini sağlar, ancak normal durumda tablonun genişliğini korur. Test aşamasında mutlaka farklı tarayıcılarda (Chrome, Firefox, Safari) tablonun genişliğini manuel olarak daraltarak "responsive" davranışını gözlemleyin.

Sonuç

Html & Css ile özelleştirilebilir bir içerik karşılaştırma tablosu oluşturmak, doğru tekniklerle hem estetik hem de işlevsel bir sonuç sağlar. Bu rehberde öğrendiğiniz yöntemleri kullanarak, kendi projelerinizde kullanıcı deneyimini iyileştiren tablolar tasarlayabilirsiniz. Bir sonraki adım olarak, bu tabloya JavaScript ekleyerek sütunları filtreleme veya sıralama gibi interaktif özellikler kazandırmayı deneyebilirsiniz.