CSS
Veri tablosu
Tablo stilleriyle veri tablosu kurarsın.
Veri tablosu ve border-collapse
Satış panelinde en altta genelde bir veri tablosu bulunur: son siparişler, en çok satan ürünler gibi. Tablolarda varsayılan çift çerçeve çirkin görünür; bunu border-collapse: collapse ile tek çerçeveye indiririz.
Bildirimi table ögesine veririz. Sonra hücrelere (th ve td) iç boşluk ve alt çizgi ekleriz.
Zebraya ve satır vurgusu
Zebraya çizgili tablo, satırları birbirinden ayırır ve okunurluğu artırır. tr:nth-child(even) ile çift satırlara açık bir gri tonu veririz. Fareyle üzerine gelinen satırı vurgulamak için tr:hover seçicisini kullanırız; arka planı açık maviye çeviririz.
Böylece kullanıcı hangi satıra baktığını kolayca takip eder; kalabalık tablolarda bu küçük fark çok işe yarar.
Hücre stilleri
Hücrelere (th ve td) iç boşluk ve alt çizgi veririz. Üst bilgi hücreleri (th) kalın yazılı ve sola hizalı olur. İç boşluğu padding ile, alt çizgiyi border-bottom ile ekleriz.
Hücreleri tek tek biçimlendirmek yerine grup seçici kullanırız: .data-table th, .data-table td. Böylece tek bir bölüm iki hücre türünü birden biçimlendirir.
Uygulama Veri tablosunu biçimlendir: .data-table
Stil sayfasına bir .data-table bölümü ekle; border-collapse: collapse ve width: 100% ver. Sonra .data-table th, .data-table td için ortak bir bölüm aç; padding: 10px, border-bottom ve text-align: left ekle. Çift satırlara zebraya yapmak için .data-table tbody tr:nth-child(even) bölümüne arka plan ver. Satır vurgusu için .data-table tbody tr:hover bölümüne başka arka plan ver.
Örnek çözümü göster
/* Satış Paneli stil sayfası */
:root {
--bg: #f5f7fa;
--card-bg: #ffffff;
}
.dashboard {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
}
.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }
.kpi-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.kpi-card {
background: var(--card-bg);
padding: 16px;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th,
.data-table td {
padding: 10px;
border-bottom: 1px solid #e5e9f0;
text-align: left;
}
.data-table tbody tr:nth-child(even) {
background: #f9fafc;
}
.data-table tbody tr:hover {
background: #eaf2ff;
}
Kendini test et
-
Çift numaralı satırlara başka renk vermek (zebraya) için hangi seçiciyi kullanırız?
- tr:last-child
- tr:nth-child(odd)
- tr:first-child
- tr:nth-child(even)
Cevabı göster
tr:nth-child(even) — Doğru. :nth-child(even) çift satırları seçer.
-
Üzerine gelinen satırın arka planını değiştir
.data-table tbody tr____ {
background: #eaf2ff;
}
Cevabı göster
.data-table tbody tr:hover {
background: #eaf2ff;
}
-
Tablo bildirimlerini görevleriyle eşleştir
- border-collapse
- çift çerçeveyi tek yapar
- nth-child(even)
- çift satırları seçer
- tr:hover
- fareyle üzerine gelinen satır
- padding
- hücre içi boşluk
Sıradaki ders: Proje sonu - Dashboard
