HTML -tabelstilering
Gebruik CSS om jou tabelle beter te laat lyk.
HTML-tabel - Zebrastrepe
As jy 'n agtergrondkleur op elke ander tafelry byvoeg, sal jy 'n mooi sebrastrepe-effek kry.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Om elke ander tabelry-element te stileer, gebruik die :nth-child(even)
kieser soos volg:
Voorbeeld
tr:nth-child(even) {
background-color: #D6EEEE;
}
Let wel: As jy in (odd)plaas van gebruik
(even), sal die stilering plaasvind op ry 1,3,5 ens. in plaas van 2,4,6 ens.
HTML-tabel - Vertikale sebrastrepe
Om vertikale sebrastrepe te maak, styl elke ander kolom , in plaas van elke ander ry .
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Stel die :nth-child(even)vir tabel data-elemente soos volg:
Voorbeeld
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Let wel: Plaas die :nth-child()kieser op beide then td
elemente as jy die stilering op beide kopskrifte en gewone tabelselle wil hê.
Kombineer vertikale en horisontale sebrastrepe
Jy kan die stilering van die twee voorbeelde hierbo kombineer en jy sal strepe op elke ander ry en elke ander kolom hê.
As jy 'n deursigtige kleur gebruik sal jy 'n oorvleuelende effek kry.
Gebruik 'n rgba()kleur om die deursigtigheid van die kleur te spesifiseer:
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);
}
Horisontale verdelers
| Eerste naam | Van | Spaargeld |
|---|---|---|
| Petrus | Griffioen | $100 |
| Lois | Griffioen | $150 |
| Joe | Swanson | $300 |
As jy grense net aan die onderkant van elke tabelry spesifiseer, sal jy 'n tabel met horisontale verdelers hê.
Voeg die border-bottomeiendom by alle
trelemente om horisontale verdelers te kry:
Voorbeeld
tr {
border-bottom: 1px solid #ddd;
}
Swaaibare tafel
Gebruik die :hoverkieser aan
trom tabelrye met die muis oor te merk:
| Eerste naam | Van | Spaargeld |
|---|---|---|
| Petrus | Griffioen | $100 |
| Lois | Griffioen | $150 |
| Joe | Swanson | $300 |
Voorbeeld
tr:hover {background-color: #D6EEEE;}