Tablo iskeleti

table, tr, td için temel stilleri öğrenirsin.

Tablo için temel biçim

Bir veri tablosu (data table), satır ve sütunlarla bilgi gösterir. HTML'de table, tr, td ve th etiketleriyle kurulur. CSS'te tabloyu biçimlerken önce iskelet hazırlanır: kenarlık, iç boşluk ve hücre aralığı.

İskelet sağlam olunca renk, hover ve zebra çizgiler gibi süslemeler kolay eklenir. Bu nedenle tablo stillerine temel kurulumdan başlanır.

Hücre iç boşluğu

Hücre iç boşluğu (cell padding), hücre kenarı ile içeriği arasındaki boşluktur. HTML'in cellpadding özniteliği eskidi; bugün CSS'te td ve th seçicilerine padding yazılır.

Örnek: td { padding: 12px; }. Bu boşluk, metnin hücre kenarına yapışmasını önler; tablo okunaklı görünür. Tüm hücrelerde aynı değeri kullanmak tutarlı bir görünüm sağlar.

Border-collapse temel

Varsayılan olarak tablo hücrelerinin kenarlıkları ayrı çizilir; iki hücrenin arasında çift çizgi oluşur. border-collapse: collapse bildirimi bu çizgileri tek çizgide birleştirir.

Bu bildirim table seçicisine yazılır. Sonuç: daha sade, daha modern bir tablo görünümü. Çoğu profesyonel tabloda bu değer tercih edilir.

Uygulama Fiyat listesi tablosuna temel stilleri ekle

Bir .fiyatlar sınıflı tablo için şu stilleri yaz: .fiyatlar seçicisine border-collapse: collapse;; .fiyatlar td, .fiyatlar th seçicisine padding: 12px; ve border: 1px solid #ddd; ekle.

Örnek çözümü göster

.fiyatlar seçicisi aç, içine border-collapse: collapse; yaz. Sonra .fiyatlar td, .fiyatlar th seçicisi aç, içine padding: 12px; ve border: 1px solid #ddd; yaz.
Örnek çözüm:
.fiyatlar {
  border-collapse: collapse;
}
.fiyatlar td, .fiyatlar th {
  padding: 12px;
  border: 1px solid #ddd;
}

Kendini test et

Hücre iç boşluğunu nerede tanımlarsın?
```
/* ? seçicisine padding yaz */
```
- td ve th seçicisinde
- table seçicisinde
- tr seçicisinde
- caption seçicisinde
Cevabı göster

td ve th seçicisinde — Doğru! Hücre iç boşluğu td ve th seçicisine padding ile yazılır.

Hücre iç boşluğu için özelliği yaz

td, th {
  ____: 12px;
  border: 1px solid #ddd;
}

Cevabı göster

td, th {
  padding: 12px;
  border: 1px solid #ddd;
}

Tablo terimlerini eşleştir

table

tablo öğesi
tr

satır
td

veri hücresi
th

başlık hücresi

Sıradaki ders: Border-collapse

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler