CSS -tabelstyl

Tafelvulling

Om die spasie tussen die rand en die inhoud in 'n tabel te beheer, gebruik die paddingeiendom op <td> en <th> elemente:

th, td {
padding: 15px;
text-align: left;
}

Voeg die border-bottomeiendom by <th> en <td> vir horisontale verdelers:

th, td {
border-bottom: 1px solid #ddd;
}

Gebruik die :hoverkieser op <tr> om tabelrye met die muis oor te merk:

tr:hover {background-color: yellow;}

Vir sebra-gestreepte tabelle, gebruik die nth-child()kieser en voeg 'n background-colorby alle ewe (of onewe) tabelrye:

tr:nth-child(even) {background-color: #f2f2f2;}

Die voorbeeld hieronder spesifiseer die agtergrondkleur en tekskleur van <th> elemente:

th {
background-color: #04AA6D;
color: white;
}