Ö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;
}

Sıradaki ders: SVG nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler