Heeft u ooit inhoud in tabelvorm moeten opmaken…

Ja, dat is me ooit overkomen.

Tabellen worden gebruikt om gestructureerde gegevens weer te geven. Het is belangrijk om de HTML-semantic te respecteren door de tags <table>, <thead>, <tbody>, <tr>, <th>, <td> te gebruiken.

Voorbeeld van een basisstructuur van een tabel:

<table>
  <thead>
    <tr>
      <th>Kop 1</th>
      <th>Kop 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gegevens 1.1</td>
      <td>Gegevens 1.2</td>
    </tr>
    <tr>
      <td>Gegevens 2.1</td>
      <td>Gegevens 2.2</td>
    </tr>
  </tbody>
</table>

Voor styling wordt CSS gebruikt. Het is belangrijk om tabellen responsief te maken, omdat ze veel ruimte kunnen innemen. Veelgebruikte benaderingen:

Gebruik overflow-x: auto op een container voor horizontale scroll.
Transformeer de tabel in een lijst of kaarten op kleine schermen met media queries en CSS Grid/Flexbox.
Voeg data-* attributen toe aan cellen om kolomkoppen weer te geven op mobiele apparaten.

Mogelijke problemen:

Moeilijkheden bij het aanpassen van brede tabellen aan kleine schermen.
Zorgen voor toegankelijkheid voor gebruikers met beperkingen (bijvoorbeeld door scope attributen te gebruiken op <th>).
Moeilijkheden bij het maken van niet-standaard lay-outs met samengevoegde cellen (rowspan, colspan).

Bij het ontwikkelen, onthoud dat tabellen geen hulpmiddel zijn voor de algemene lay-out van de pagina, maar voor het weergeven van tabelgegevens.

Heeft u ooit inhoud in tabelvorm moeten opmaken?