CSS -tabelstijl

Tafelopvulling

Gebruik de paddingeigenschap op <td> en <th> elementen om de ruimte tussen de rand en de inhoud in een tabel te bepalen:

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

Voeg de border-bottomeigenschap toe aan <th> en <td> voor horizontale scheidingslijnen:

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

Gebruik de :hoverselector op <tr> om tabelrijen te markeren met de muis over:

tr:hover {background-color: yellow;}

Gebruik voor tabellen met zebrastrepen de nth-child()selector en voeg a toe background-coloraan alle even (of oneven) tabelrijen:

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

Het onderstaande voorbeeld specificeert de achtergrondkleur en tekstkleur van <th> elementen:

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