Stylizacja tabeli HTML
Użyj CSS, aby Twoje tabele wyglądały lepiej.
Tabela HTML - Zebra Stripes
Jeśli dodasz kolor tła w co drugim rzędzie tabeli, uzyskasz ładny efekt pasków zebry.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Aby wystylizować każdy inny element wiersza tabeli, użyj :nth-child(even)
selektora w ten sposób:
Przykład
tr:nth-child(even) {
background-color: #D6EEEE;
}
Uwaga: jeśli użyjesz (odd)zamiast
(even), stylizacja zostanie zastosowana w wierszu 1,3,5 itd. zamiast 2,4,6 itd.
Tabela HTML - pionowe paski zebry
Aby utworzyć pionowe paski zebry, stylizuj co drugą kolumnę , a nie co drugi wiersz .
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Ustaw :nth-child(even)elementy danych dla tabeli w następujący sposób:
Przykład
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Uwaga: Umieść :nth-child()selektor na obu elementach thi td
, jeśli chcesz, aby stylizacja dotyczyła zarówno nagłówków, jak i zwykłych komórek tabeli.
Połącz pionowe i poziome paski zebry
Możesz połączyć stylizację z dwóch powyższych przykładów i będziesz mieć paski w co drugim rzędzie i co drugiej kolumnie.
Jeśli użyjesz przezroczystego koloru, uzyskasz efekt nakładania się.
Użyj rgba()koloru, aby określić przezroczystość koloru:
Przykład
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);
}
Przegrody poziome
| Imię | Nazwisko | Oszczędności |
|---|---|---|
| Piotr | Gryf | 100 zł |
| Lois | Gryf | 150 zł |
| Joe | Swanson | 300 zł |
Jeśli określisz granice tylko na dole każdego wiersza tabeli, otrzymasz tabelę z poziomymi przegrodami.
Dodaj border-bottomwłaściwość do wszystkich
trelementów, aby uzyskać poziome dzielniki:
Przykład
tr {
border-bottom: 1px solid #ddd;
}
Unoszący się stół
Użyj :hoverselektora,
traby podświetlić wiersze tabeli po najechaniu myszą:
| Imię | Nazwisko | Oszczędności |
|---|---|---|
| Piotr | Gryf | 100 zł |
| Lois | Gryf | 150 zł |
| Joe | Swanson | 300 zł |
Przykład
tr:hover {background-color: #D6EEEE;}