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