HTML -Tabellenstil
Verwenden Sie CSS, um Ihre Tabellen besser aussehen zu lassen.
HTML-Tabelle – Zebrastreifen
Wenn Sie in jeder zweiten Tabellenzeile eine Hintergrundfarbe hinzufügen, erhalten Sie einen schönen Zebrastreifeneffekt.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Um jedes andere Tabellenzeilenelement zu formatieren, verwenden Sie den Selektor :nth-child(even) wie folgt:
Hinweis: Wenn Sie (odd) anstelle von (even), das Styling erfolgt in Zeile 1,3,5 usw. statt in 2,4,6 usw.
HTML-Tabelle – Vertikale Zebrastreifen
Um vertikale Zebrastreifen zu erstellen, formatieren Sie jede zweite Spalte statt jeder zweiten Zeile.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Legen Sie :nth-child(even) für Tabellendatenelemente wie folgt fest:
Hinweis: Platzieren Sie den :nth-child()-Selektor auf beiden th- und td-Elemente, wenn Sie den Stil sowohl für Überschriften als auch für reguläre Tabellenzellen haben möchten.
Kombinieren Sie vertikale und horizontale Zebrastreifen
Sie können den Stil aus den beiden obigen Beispielen kombinieren und erhalten dann Streifen in jeder zweiten Zeile und jeder zweiten Spalte.
Wenn Sie eine transparente Farbe verwenden, erhalten Sie einen überlappenden Effekt.
Verwenden Sie eine rgba()-Farbe, um die Transparenz der Farbe anzugeben:
Beispiel
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);
}
Try it Yourself »
Horizontale Trennwände
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Wenn Sie Rahmen nur am unteren Rand jeder Tabellenzeile angeben, erhalten Sie eine Tabelle mit horizontalen Trennwänden.
Fügen Sie die Eigenschaft border-bottom zu allen tr-Elementen hinzu, um horizontale Teiler zu erhalten:
Schwebender Tisch
Verwenden Sie den Selektor :hover auf tr, um Tabellenzeilen hervorzuheben, wenn Sie mit der Maus darüber fahren:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
