Om gegevens overzichtelijk weer te geven wordt vaak gebruik gemaakt van een tabel.
Een tabel bestaat uit een aantal rijen en kolommen.
<table> <tr> <td>rij 1 kolom 1</td> <td>tij 1 kolom 2</td> </tr> <tr> <td>rij 2 kolom 1</td> <td>rij 2 kolom 2</td> </tr> </table>
De tag tr staat voor table-row (tabel rij). En td staat voor table-data (kolom veld in een rij). Met als resultaat

Vaak wil je om je cellen randen hebben zodat je duidelijk kan zien welke inhoud bij welke cel hoort.
De opmaak gebeurt uiteraard weer in CSS
table { border-collapse: collapse; /* anders krijg je vreemde randen*/ width: 50%; /* breedte van je tabel */ } td { border: 1px solid black; /* een rand om elke cel */ padding: 5px; /* een stukje ruimte tussen de rand en de tekst */ }

Vaak wil je je tabel een koptekst geven. Dit kan met de th-tag. Bijvoorbeeld
<table> <tr> <th>Kolom 1</th> <th>Kolom 2</th> </tr> <tr> <td>rij 1 kolom 1</td> <td>rij 1 kolom 2</td> </tr> <tr> <td>rij 2 kolom 1</td> <td>rij 2 kolom 2</td> </tr> </table>
Omdat je nu ook je th opmaak wilt geven kan je je CSS aanpassen naar
table { border-collapse: collapse; /* anders krijg je vreemde randen*/ width: 50%; /* breedte van je tabel */ } td, th { border: 1px solid gray; /* een rand om elke cel */ padding: 5px; /* een stukje ruimte tussen de rand en de tekst */ text-align: left; /* tekst link (voor th) standaard center */ }
Voor de leesbaarheid wordt de achtergrond van de rijen vaak om en om een tint gegeven. Gebruik hiervoor de volgende CSS
tr:nth-child(even) { background-color: whitesmoke; }
Elke even tr rij krijgt dan een achtergrondkleur.
