Yükleniyor...

CSS’te tablolar

HTML satır ve hücre ızgarasını kurar. CSS kenarlıkların temiz görünüp görünmeyeceğini, tablonun ne kadar geniş oturacağını, metnin hücrede nereye oturacağını ve satırların kolay taranıp taranamayacağını belirler.

Tablolar için bir CSS araç seti

📊 Bir bakışta tablo stilleri

Özellik Günlük işi
border-collapse Hücre kenarlıklarını birleştir (collapse) veya ayrı tut (separate)
border-spacing Kenarlıklar ayrıyken hücreler arası boşluk
width Tablo genişliği (sıkça makale/kartta 100%)
th/td üzerinde padding Hücre içinde nefes payı
text-align / vertical-align Hücrede yatay ve dikey hizalama

Çoğunlukla table, th, td ve bazen tr stillendirin — her hücreyi tek tek değil — böylece tüm veri ızgarası tutarlı kalır.

Çift görünmeyen kenarlıklar

Yardım olmadan komşu hücre kenarlıkları kalın veya çift görünebilir. border-collapse: collapse onları tek temiz çizgide birleştirir — veri tabloları için günlük tercih.

Birleştirilmiş tablo kenarlıkları

css
CSS Code 
table.data {
width: 100%;
border-collapse: collapse;
}

table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}

Ayrı kenarlıklar ve boşluk

Hücreler arasında görünür boşluk istiyorsanız border-collapse: separate kullanın ve border-spacing ayarlayın. Collapse açıkken spacing yok sayılır.

Boşluklu ayrı hücreler

css
CSS Code 
table.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}

table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}

Genişlik, başlıklar ve hizalama

Tam genişlik tablo makalelerde çoğu zaman daha iyi okunur. Başlıkları vurgulayın, metni hizalayın ve hücre yükseklikleri farklıysa vertical-align kullanın.

Başlık ve hücre hizası

css
CSS Code 
table.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}

table.data td {
text-align: left;
vertical-align: top;
}

Zebra satırlar ve sakin hover

Alternatif arka planlar geniş tabloları izlemeye yardım eder. tr üzerinde hafif :hover neon gürültüsü olmadan aktif satırı vurgular.

Zebra + satır hover

css
CSS Code 
table.data tbody tr:nth-child(even) {
background: #fafafa;
}

table.data tbody tr:hover {
background: #eef5ff;
}

Sakin bir veri-tablosu alışkanlığı

Kenarlıkları birleştirin, hücrelere gerçek padding verin, başlık kontrastını ölçülü tutun ve zebra/hover’ı yalnızca geniş tablonun tarama yardımına ihtiyacı varken ekleyin.

Okunaklı makale tablosu

css
CSS Code 
article table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}

article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}

Kendiniz deneyin

  1. th/td üzerine border-collapse: collapse ve hafif kenarlık koyun.
  2. Hücrelere rahat padding ekleyin.
  3. Başlıkları sola hizalayın; çok satırlı hücrelerde vertical-align: top deneyin.
  4. Çift satırları tr:nth-child(even) ile şeritlendirin.
  5. Yumuşak tr:hover arka planı ekleyin — sonra ikinci tablo ve border-spacing ile karşılaştırın.

Yaygın hatalar

  • Varsayılan ayrı kenarlıkları bırakıp çizgilerin çift ve dağınık görünmesi
  • border-collapse: collapse ile border-spacing ayarlamak (yok sayılır)
  • Yoğun veriyi zor okutan minik padding
  • İçerikle savaşan neon hover veya ağır zebra
  • Bu dersi list-style işaretleriyle karıştırmak (önceki oturum)

Özet

  • Veri tabloları için border-collapse: collapse sakin varsayılandır
  • Hücreler arası boşluk için separate + border-spacing
  • Genişlik, padding ve hizalama okunabilirliği şekillendirir
  • Zebra ve hafif hover taramaya yardım eder
  • Yapı HTML’de; görünüm CSS’te kalsın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 32 / 35
Css Ders