CSS Tablo Stili
Masa Dolgusu
Bir tablodaki kenarlıkla içerik arasındaki boşluğu kontrol etmek için
padding
<td> ve <th> öğelerindeki özelliği kullanın:
Örnek
th, td
{
padding: 15px;
text-align: left;
}
Yatay Bölücüler
İlk adı | Soyadı | tasarruf |
---|---|---|
Peter | grifon | 100$ |
Lois | grifon | 150 $ |
Joe | swanson | 300 $ |
border-bottom
Yatay bölücüler için özelliği <th> ve <td> öğelerine ekleyin :
Örnek
th, td {
border-bottom: 1px solid #ddd;
}
gezinebilir masa
:hover
Fareyle üzerine gelindiğinde tablo satırlarını vurgulamak için <tr> üzerindeki seçiciyi kullanın :
İlk adı | Soyadı | tasarruf |
---|---|---|
Peter | grifon | 100$ |
Lois | grifon | 150 $ |
Joe | swanson | 300 $ |
Örnek
tr:hover {background-color: yellow;}
Çizgili Masalar
İlk adı | Soyadı | tasarruf |
---|---|---|
Peter | grifon | 100$ |
Lois | grifon | 150 $ |
Joe | swanson | 300 $ |
Zebra çizgili tablolar için nth-child()
seçiciyi kullanın ve background-color
tüm çift (veya tek) tablo satırlarına a ekleyin:
Örnek
tr:nth-child(even) {background-color: #f2f2f2;}
Tablo Rengi
Aşağıdaki örnek, <th> öğelerinin arka plan rengini ve metin rengini belirtir:
İlk adı | Soyadı | tasarruf |
---|---|---|
Peter | grifon | 100$ |
Lois | grifon | 150 $ |
Joe | swanson | 300 $ |
Örnek
th {
background-color: #04AA6D;
color: white;
}