Lijsten en tabellen

Lijsten

We noemen hier drie soorten 'lijsten': de ongeordende lijst, de geordende of genummerde lijst en de definitie lijst ('unordered list', 'ordered list', 'definition list').

De ongeordende lijst staat tussen [ul] en [/ul]. De afzonderlijke items worden voorafgegaan door [li].

Een geordende lijst staat tussen [ol] en [/ol]. De afzonderlijke items worden ook nu voorafgegaan door [li].

  1. item 1
  2. item 2
  3. item 3

Een definitie lijst staat tussen [dl] en [/dl]. De afzonderlijke items worden voorafgegaan door [dt] of door [lt]

item 1
beschrijving item 1
item 2
beschrijving item 2

We kunnen deze tags aanvullen met opties. (Zie oefeningen.)

Tabellen

Een tabel staat tussen de tags [table] en [/table]. In de tabel staat een rij tussen de tags [tr] en [/tr]. In elke rij staat een kolom tussen de tags [td] en [td].

rij 1, kolom 1 rij 1, kolom 2 rij 1, kolom 3
rij 2, kolom 1 rij 2, kolom 2 rij 2, kolom 3

In veel gevallen zullen we opties gebruiken om de tabel te voorzien van een 'border' en om afstand tussen de rijen en kolommen te genereren. Bekijk in de source code van deze pagina, hoe ondertaande tabel is gemaakt.

rij 1, kolom 1 rij 1, kolom 2 rij 1, kolom 3
rij 2, kolom 1 rij 2, kolom 2 rij 2, kolom 3

We kunnen de tabelbreedte specificeren, hieronder met de optie width="50%" in de table-tag.

rij 1, kolom 1 rij 1, kolom 2 rij 1, kolom 3
rij 2, kolom 1 rij 2, kolom 2 rij 2, kolom 3

Als de tekst niet in alle cellen even lang is, krijgen we onderstaande tabel. De langste tekst bepaalt de kolombreedte.

1, 1 rij 1, kol 2 rij 1, kolom 3
2, 1 rij 2, kolom 2 rij 2, kolom 3 en een lange tekst

Dat kunnen we voorkomen door de kolombreedte voor te schrijven als optie in [td] dus [td width="30%"].

1, 1 rij 1, kol 2 rij 1, kolom 3
2, 1 rij 2, kolom 2 rij 2, kolom 3 en een lange tekst

We moeten er dan voor zorgen dat de tekst in een cel mooi is uitgelijnd. Dat doen we door in [td] een optie toe te voegen, waarmee we nu hebben: [td width="30%" valign="top"] hetgeen resulteert in

1, 1 rij 1, kol 2 rij 1, kolom 3
2, 1 rij 2, kolom 2 rij 2, kolom 3 en een lange tekst

Er zijn vele mogelijkheden om zaken in tabellen te organiseren. In de oefeningen zullen we er een aantal uitproberen.