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.