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].

item 1
item 2
item 3

De regelafstand tussen de items is groter gemaakt.

item 1
item 2
item 3

Bovenstaande lijst met in elke lijst drie nieuwe items:

item 1
- item 1a
- item 1b
- item 1c
item 2
- item 2a
- item 2b
- item 2c
item 3
- item 3a
- item 3b
- item 3c

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

item 1
item 2
item 3

De lijst met letters ipv cijfers.

item 1
item 2
item 3

De lijst met Romeinse cijfers.

item 1
item 2
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

De tabel met 'colspan="3"' voor eerste rij.

rij 1, kolom 1-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.

Andere waarden voor "border", "cellspacing" en "cellpadding".

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.

De nieuwe tabel met twee kolommen. De breedte van het plaatje is in percentage van de breedte van de kolom.
Het is handig om even een border="1" te gebruiken. We kunnen dan beter zien waar de tekst in de kolommen staat.

Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst.

Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst. Dit is een kort stukje tekst.

Hieronder staat de tabel, gemaakt in LibreOffice en geconverteerd online.
De eigenlijke tabel is uit de geconverteerde file gecopieerd en van een border etc. voorzien.

We hoeven deze conversie niet online te doen. LibreOffice kan de tabel namelijk opslaan in 'html'-formaat.
Het resultaat is identiek aan de online-conversie.

kolom 1, rij 1	kolom 2, rij 1	kolom 3, rij 1
kolom 1, rij 2	kolom 2, rij 2	kolom 3, rij 2
kolom 1, rij 3	kolom 2, rij 3	kolom 3, rij 3
kolom 1, rij 4	kolom 2, rij 4	kolom 3, rij 4
kolom 1, rij 5	kolom 2, rij 5	kolom 3, rij 5