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 th
i 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-bottom
właściwość do wszystkich
tr
elementów, aby uzyskać poziome dzielniki:
Przykład
tr {
border-bottom: 1px solid #ddd;
}
Unoszący się stół
Użyj :hover
selektora,
tr
aby 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;}