Özet - Veri tablosu
Tablo stilleriyle profesyonel veri tablosu kurarsın.
Veri tablosuna giriş
Bu grupta tablo stillerini öğrendin: iskelet için border-collapse ve padding, başlık için th stilleri, satır vurgusu için :nth-child(even) ve tr:hover. Şimdi bunları birleştirip profesyonel bir veri tablosu kuracağız.
Hedef: satış raporu tablosu. Sütun başlıkları koyu, satırlar zebra çizgili, üzerine gelinen satır vurgulu. Tüm parçalar yerli yerinde.
Uygulama Satış raporu tablosunu kur
Bir .rapor sınıflı tabloyu kur: .rapor seçicisine border-collapse: collapse;; .rapor th seçicisine background: #1e3a8a; ve color: #ffffff;; .rapor td, .rapor th seçicisine padding: 10px; ekle.
Örnek çözümü göster
üç seçici aç. .rapor içine border-collapse: collapse; yaz. .rapor th içine background: #1e3a8a; ve color: #ffffff; yaz. .rapor td, .rapor th içine padding: 10px; yaz.
Örnek çözüm:
.rapor {
border-collapse: collapse;
}
.rapor th {
background: #1e3a8a;
color: #ffffff;
}
.rapor td, .rapor th {
padding: 10px;
}Uygulama Satış raporuna zebra ve hover ekle
Aynı .rapor tablosuna zebra çizgi ve hover satırı ekle: .rapor tr:nth-child(even) seçicisine background: #f1f5f9;; .rapor tr:hover seçicisine background: #e0e7ff; yaz.
Örnek çözümü göster
iki seçici aç. .rapor tr:nth-child(even) içine background: #f1f5f9; yaz. .rapor tr:hover içine background: #e0e7ff; yaz.
Örnek çözüm:
.rapor tr:nth-child(even) {
background: #f1f5f9;
}
.rapor tr:hover {
background: #e0e7ff;
}Kendini test et
-
Profesyonel bir tabloda hangisi tercih edilir?
/* ? kombinasyonu profesyonel tabloya uyar */- Her hücreye ayrı kenarlık rengi
- border-collapse: collapse ve zebra çizgiler
- Tüm satırlara aynı arka plan rengi
- Başlıksız bir tablo
Cevabı göster
border-collapse: collapse ve zebra çizgiler — Doğru! Birleşik kenarlık ve zebra çizgiler profesyonel tablonun temelidir.
-
Tablo kavramlarını eşleştir
- border-collapse
- kenarlık birleştirme
- th
- başlık hücresi
- :nth-child(even)
- zebra çizgiler
- tr:hover
- hover satırı
-
Zebra için değer
.rapor tr:nth-child(even) { background: ____; }Cevabı göster
.rapor tr:nth-child(even) { background: #f1f5f9; }