HTML -Tabellengestaltung
Verwenden Sie CSS, um Ihre Tabellen besser aussehen zu lassen.
HTML-Tabelle - Zebrastreifen
Wenn Sie 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 | fünfzehn | 16 |
| 17 | 18 | 19 | 20 |
Um jedes andere Tabellenzeilenelement zu gestalten, verwenden Sie den :nth-child(even)
Selektor wie folgt:
Beispiel
tr:nth-child(even) {
background-color: #D6EEEE;
}
Hinweis: Wenn Sie (odd)anstelle von verwenden
(even), erfolgt das Styling in Zeile 1,3,5 usw. anstelle von Zeile 2,4,6 usw.
HTML-Tabelle - Vertikale Zebrastreifen
Um vertikale Zebrastreifen zu erstellen, stylen Sie jede zweite Spalte , anstatt jede zweite Reihe .
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | fünfzehn | 16 |
| 17 | 18 | 19 | 20 |
Legen Sie die :nth-child(even)Datenelemente für Tabellen wie folgt fest:
Beispiel
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Hinweis: Setzen Sie den :nth-child()Selektor sowohl auf thals auch auf td
Elemente, wenn Sie das Styling sowohl auf Kopfzeilen als auch auf normale Tabellenzellen haben möchten.
Kombinieren Sie vertikale und horizontale Zebrastreifen
Sie können das Styling aus den beiden obigen Beispielen kombinieren und Sie werden Streifen in jeder zweiten Reihe und jeder zweiten Spalte haben.
Wenn Sie eine transparente Farbe verwenden, erhalten Sie einen überlappenden Effekt.
Verwenden Sie eine rgba()Farbe, um die Transparenz der Farbe festzulegen:
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);
}
Horizontale Teiler
| Vorname | Nachname | Ersparnisse |
|---|---|---|
| Peter | Greif | $100 |
| Lois | Greif | $150 |
| Jo | Schwanson | $300 |
Wenn Sie Rahmen nur am unteren Rand jeder Tabellenzeile angeben, erhalten Sie eine Tabelle mit horizontalen Trennlinien.
Fügen Sie die border-bottomEigenschaft allen
trElementen hinzu, um horizontale Trennlinien zu erhalten:
Beispiel
tr {
border-bottom: 1px solid #ddd;
}
Schwebebarer Tisch
Verwenden Sie den :hoverSelektor
tr, um Tabellenzeilen hervorzuheben, wenn Sie mit der Maus darüber fahren:
| Vorname | Nachname | Ersparnisse |
|---|---|---|
| Peter | Greif | $100 |
| Lois | Greif | $150 |
| Jo | Schwanson | $300 |
Beispiel
tr:hover {background-color: #D6EEEE;}