HTML-tabel maken in 6 stappen

Stap 1: Rijen en cellen

Begin met <table>. Elke rij is een <tr> (table row), en elke cel in die rij een <td> (table data). Alle rijen moeten evenveel cellen hebben, anders lopen de kolommen niet gelijk.

HTML

<table>
  <tr>
    <td>Appels</td>
    <td>€ 2,49</td>
  </tr>
  <tr>
    <td>Peren</td>
    <td>€ 2,99</td>
  </tr>
</table>

Resultaat in de browser

Stap 2: Kopcellen toevoegen

Zet de kolomnamen in een eerste rij met <th> in plaats van <td>. Een <th> is een kopcel: browsers maken hem vet, en schermlezers lezen hem voor bij elke cel in die kolom. Met scope="col" maak je dat verband expliciet.

HTML

<table>
  <tr>
    <th scope="col">Product</th>
    <th scope="col">Prijs</th>
  </tr>
  <tr>
    <td>Appels</td>
    <td>€ 2,49</td>
  </tr>
  <tr>
    <td>Peren</td>
    <td>€ 2,99</td>
  </tr>
</table>

Resultaat in de browser

Stap 3: Kop en inhoud scheiden

Groepeer de kopregel in <thead> en de gegevens in <tbody>. Je ziet geen verschil, maar de structuur is duidelijker, en je kunt de delen apart opmaken. Een totaalregel hoort in <tfoot>.

HTML

<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Prijs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appels</td>
      <td>€ 2,49</td>
    </tr>
    <tr>
      <td>Peren</td>
      <td>€ 2,99</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totaal</th>
      <td>€ 5,48</td>
    </tr>
  </tfoot>
</table>

Resultaat in de browser

Stap 4: Een bijschrift geven

Met <caption> geef je de tabel een titel. Zet hem direct na de openingstag van <table>. Het bijschrift helpt iedereen, en schermlezers noemen het als eerste wanneer ze de tabel binnengaan.

HTML

<table>
  <caption>Fruitprijzen deze week</caption>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Prijs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appels</td>
      <td>€ 2,49</td>
    </tr>
  </tbody>
</table>

Resultaat in de browser

Stap 5: Cellen samenvoegen

Met colspan laat je een cel over meerdere kolommen lopen, met rowspan over meerdere rijen. Tel goed na: een samengevoegde cel neemt de plaats in van de cellen die je weglaat.

HTML

<table>
  <tr>
    <th scope="col">Dag</th>
    <th scope="col">Ochtend</th>
    <th scope="col">Middag</th>
  </tr>
  <tr>
    <td>Maandag</td>
    <td colspan="2">Hele dag cursus</td>
  </tr>
  <tr>
    <td>Dinsdag</td>
    <td>Vrij</td>
    <td>Werken</td>
  </tr>
</table>

Resultaat in de browser

Stap 6: Opmaken met CSS

Randen, ruimte en kleuren regel je met CSS, niet met oude attributen als border of bgcolor. border-collapse: collapse voegt de randen van aangrenzende cellen samen tot één lijn.

HTML

<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Prijs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appels</td>
      <td>€ 2,49</td>
    </tr>
    <tr>
      <td>Peren</td>
      <td>€ 2,99</td>
    </tr>
  </tbody>
</table>

Resultaat in de browser

CSS

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #c9a2e0;
  padding: 8px 12px;
  text-align: left;
}

thead th {
  background: #f1e7f7;
}

Verder lezen

Alle attributen en details van het element staan op <table>.