HTML Tablo Stili
Tablolarınızın daha iyi görünmesi için CSS kullanın.
HTML Tablosu - Zebra Çizgileri
Her tablo satırına bir arka plan rengi eklerseniz, güzel bir zebra çizgili efekti elde edersiniz.
1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
Diğer tüm tablo satırı öğelerine stil vermek için :nth-child(even)
seçiciyi şu şekilde kullanın:
Örnek
tr:nth-child(even) {
background-color: #D6EEEE;
}
Not:(odd)
yerine kullanırsanız
(even)
, stil 2,4,6 vb. yerine 1,3,5 vb. satırda gerçekleşir.
HTML Tablosu - Dikey Zebra Çizgileri
Dikey zebra çizgileri oluşturmak için, diğer her satır yerine her sütuna stil verin .
1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
:nth-child(even)
for tablosu veri öğelerini şu şekilde ayarlayın :
Örnek
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Not: Stilin
hem başlıklarda hem de normal tablo hücrelerinde olmasını istiyorsanız :nth-child()
seçiciyi hem öğelerin hem de öğelerin üzerine th
koyun .td
Dikey ve Yatay Zebra Çizgilerini Birleştirin
Yukarıdaki iki örnekteki stili birleştirebilirsiniz ve her iki satırda ve her sütunda çizgiler olacaktır.
Saydam bir renk kullanırsanız, örtüşen bir efekt elde edersiniz.
Rengin saydamlığını belirtmek için bir rgba()
renk kullanın:
Örnek
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
Yatay Bölücüler
İlk adı | Soyadı | tasarruf |
---|---|---|
Peter | grifon | 100$ |
Lois | grifon | 150 $ |
Joe | swanson | 300 $ |
Her tablo satırının sadece alt kısmında kenarlıklar belirtirseniz, yatay bölücülere sahip bir tablonuz olur.
border-bottom
Yatay bölücüler elde etmek için özelliği tüm
tr
öğelere ekleyin :
Örnek
tr {
border-bottom: 1px solid #ddd;
}
gezinebilir masa
Fareyle üzerine gelindiğinde tablo satırlarını vurgulamak için :hover
seçiciyi
kullanın :tr
İlk adı | Soyadı | tasarruf |
---|---|---|
Peter | grifon | 100$ |
Lois | grifon | 150 $ |
Joe | swanson | 300 $ |
Örnek
tr:hover {background-color: #D6EEEE;}