HTML -tabelstijl
Gebruik CSS om uw tabellen er beter uit te laten zien.
HTML-tabel - Zebrastrepen
Als je op elke andere tafelrij een achtergrondkleur toevoegt, krijg je een mooi zebrastrepeneffect.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
:nth-child(even)
Gebruik de selector als volgt om elk ander tabelrij-element op te maken:
Voorbeeld
tr:nth-child(even) {
background-color: #D6EEEE;
}
Let op: Als u in (odd)plaats van
(even), de stijl gebruikt, komt de stijl voor op rij 1,3,5 enz. in plaats van 2,4,6 enz.
HTML-tabel - Verticale zebrastrepen
Om verticale zebrastrepen te maken, stijlt u om de andere kolom , in plaats van om de andere rij .
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Stel de :nth-child(even)voor tabelgegevenselementen als volgt in:
Voorbeeld
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Opmerking: Zet de :nth-child()selector op beide then td
elementen als u de stijl op zowel kopteksten als gewone tabelcellen wilt hebben.
Combineer verticale en horizontale zebrastrepen
Je kunt de styling van de twee bovenstaande voorbeelden combineren en je hebt strepen op elke andere rij en elke andere kolom.
Als je een transparante kleur gebruikt, krijg je een overlappend effect.
Gebruik een rgba()kleur om de transparantie van de kleur op te geven:
Voorbeeld
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 verdelers
| Voornaam | Achternaam | Besparingen |
|---|---|---|
| Peter | Griffioen | $ 100 |
| Loïs | Griffioen | $ 150 |
| Joe | Swanson | $ 300 |
Als u alleen randen opgeeft aan de onderkant van elke tabelrij, krijgt u een tabel met horizontale scheidingslijnen.
Voeg de border-bottomeigenschap toe aan alle
trelementen om horizontale scheidingslijnen te krijgen:
Voorbeeld
tr {
border-bottom: 1px solid #ddd;
}
Zweefbare tafel
Gebruik de :hoverselector aan
trom tabelrijen te markeren door met de muis over te gaan:
| Voornaam | Achternaam | Besparingen |
|---|---|---|
| Peter | Griffioen | $ 100 |
| Loïs | Griffioen | $ 150 |
| Joe | Swanson | $ 300 |
Voorbeeld
tr:hover {background-color: #D6EEEE;}