Tabel

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

tabel 1

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 */
}

tabel 2

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.

tabel 3