Lijsten en tabellen

In de vorige les stonden de ingrediënten van de appeltaart in één lange alinea. Dat leest slecht. Gegevens die bij elkaar horen, zet je in een lijst; gegevens met rijen en kolommen in een tabel. In deze les leer je allebei, en ook wanneer je een tabel juist níet gebruikt.

Ongeordende lijsten

Een lijst waarbij de volgorde niet uitmaakt, is een unordered list:

<h2>Ingrediënten</h2>
<ul>
  <li>300 g bloem</li>
  <li>200 g boter</li>
  <li>150 g suiker</li>
  <li>1 ei</li>
</ul>

<ul> is de lijst, elke <li> (list item) een punt. De browser zet er bolletjes voor.

Geordende lijsten

Telt de volgorde wel, zoals bij stappen, gebruik dan een ordered list:

<ol>
  <li>Verwarm de oven voor op 175 °C.</li>
  <li>Kneed het deeg.</li>
  <li>Bekleed de springvorm.</li>
</ol>

De browser nummert zelf. Voeg je een stap toe, dan schuiven de nummers vanzelf op. Met attributen pas je de nummering aan: <ol start="4"> begint bij 4, <ol reversed> telt af, <ol type="a"> gebruikt letters.

Geneste lijsten

Een lijst mag in een <li> staan:

<ul>
  <li>Voor het deeg
    <ul>
      <li>300 g bloem</li>
      <li>200 g boter</li>
    </ul>
  </li>
  <li>Voor de vulling
    <ul>
      <li>1 kg appels</li>
      <li>2 tl kaneel</li>
    </ul>
  </li>
</ul>

Let op: de binnenste <ul> staat binnen de <li>, vóór de </li>.

Definitielijsten

Voor begrippen met een uitleg is er <dl> (description list):

<dl>
  <dt>Springvorm</dt>
  <dd>Bakvorm met een losse bodem en een rand die je kunt openen.</dd>
  <dt>Blind bakken</dt>
  <dd>De bodem voorbakken zonder vulling.</dd>
</dl>

Tabellen

Een tabel gebruik je voor gegevens die in rijen en kolommen horen: een rooster, een prijslijst, uitslagen.

<table>
  <caption>Lesrooster klas 1B, week 42</caption>
  <thead>
    <tr>
      <th scope="col">Tijd</th>
      <th scope="col">Maandag</th>
      <th scope="col">Dinsdag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">08:30</th>
      <td>Programmeren</td>
      <td>Databases</td>
    </tr>
    <tr>
      <th scope="row">10:15</th>
      <td>Engels</td>
      <td>Webdesign</td>
    </tr>
  </tbody>
</table>

th en scope

Een schermlezer leest bij elke cel de bijbehorende koppen voor: "Dinsdag, 10:15, Webdesign". Daarvoor moet hij weten welke cel een kop is (<th>) en of die kop voor een kolom of een rij geldt (scope="col" of scope="row"). Bij een eenvoudige tabel raadt de browser het meestal goed, maar met scope weet je het zeker.

Cellen samenvoegen

Een cel kan over meerdere kolommen of rijen lopen:

<tr>
  <th scope="row">12:00</th>
  <td colspan="2">Pauze</td>
</tr>

colspan="2" laat de cel over twee kolommen lopen; rowspan doet hetzelfde over rijen. Gebruik het met mate; ingewikkelde tabellen zijn lastig te volgen, vooral met een schermlezer.

Wanneer géén tabel

Vroeger bouwden webmakers hele pagina's met tabellen, om dingen naast elkaar te krijgen. Dat doe je niet meer:

• Een schermlezer kondigt elke tabel aan als "tabel met 3 kolommen" en leest cel voor cel. Voor een layout is dat verwarrend.
• Op een smal scherm kan een tabel niet netjes onder elkaar vallen.

Voor layout gebruik je CSS (flexbox en grid, les 10 en 11). Een vuistregel: heeft het kolomkoppen die zinvol zijn? Dan is het een tabel. Zo niet, dan niet.

Uitgewerkt voorbeeld: prijslijst

Voorspel voordat je de code leest: moet dit een lijst of een tabel zijn?

Koffie € 2,80 · Thee € 2,40 · Croissant € 1,95 — met per product ook het aantal calorieën.

Antwoord: een tabel, want er zijn kolommen met een betekenis (product, prijs, calorieën).

<table>
  <caption>Prijslijst lunchroom</caption>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Prijs</th>
      <th scope="col">kcal</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Koffie</th><td>€ 2,80</td><td>5</td></tr>
    <tr><th scope="row">Thee</th><td>€ 2,40</td><td>2</td></tr>
    <tr><th scope="row">Croissant</th><td>€ 1,95</td><td>230</td></tr>
  </tbody>
</table>

Zonder calorieën, met alleen product en prijs, kan het ook een lijst zijn. Beide zijn goed; kies wat het duidelijkst is.

De tabel heeft nog geen randen. Die voeg je later met CSS toe.

Typische fouten

Oefeningen

Oefening 1. Maak een geordende lijst met de stappen om thee te zetten, en een ongeordende lijst met wat je nodig hebt.

<h2>Nodig</h2>
<ul>
  <li>Waterkoker</li>
  <li>Theezakje</li>
  <li>Mok</li>
</ul>
<h2>Stappen</h2>
<ol>
  <li>Kook water.</li>
  <li>Hang het theezakje in de mok.</li>
  <li>Giet het water erop en wacht 3 minuten.</li>
</ol>

Oefening 2. Lijst of tabel? (a) De navigatie van een site. (b) Uitslagen van een voetbalcompetitie met gespeeld, gewonnen, punten. (c) Een recept met de stappen.

Oefening 3. Voeg aan de prijslijst een <tfoot> toe met de tekst Alle prijzen zijn inclusief btw over de volle breedte.

<tfoot>
  <tr><td colspan="3">Alle prijzen zijn inclusief btw.</td></tr>
</tfoot>

Lab: lesrooster als tabel

Samenvatting

• <ul> als volgorde niet uitmaakt, <ol> als dat wel zo is; elk punt een <li>.
• <dl> met <dt> en <dd> voor begrippen en uitleg.
• Tabellen alleen voor gegevens in rijen en kolommen: caption, thead, tbody, th met scope.
• Nooit tabellen voor layout.

Volgende les: semantische HTML, de structuur van een hele pagina.