9.4 Uitbreiding - complexe tabellen

Dit stukje van de cursus is uitbreiding omdat dit iets moeilijker wordt om makkelijk te kunnen begrijpen. We nemen dit dan ook niet mee op in onze voorbeeldpagina's, zodat iedereen toch kan blijven volgen.
Probeer onderstaande wél te begrijpen, want indien u het begrijpt kun u hiermee alle mogelijke indelingen van tabellen maken.

Als je een tabel wenst te maken als deze:

Of misschien een tabel als deze:

Dit zal niet lukken met wat je tot nu toe kent.
We moeten hiervoor 2 nieuwe parameters, namelijk rowspan=”” en colspan=”” bijleren. Een van deze twee zal je als extra parameter moeten meegeven aan de tag <td>.

Eerst gaan we dit voorbeeldje proberen te maken:

Cel 1	Cel 2
	Cel 3

We gaan eigenlijk de browser een commando geven dat de eerste cel eigenlijk de plaats moet innemen van 2 cellen. Dit doen we door de parameter rowspan=””, hierin zie je ‘row’ staan, wat rij betekend. We gaan dus de browser zeggen dat een bepaalde cel 2 rijen moet innemen als plaats.

De broncode van voorgaande voorbeeld is dan als volgt:

<table width="50%" border="1">
<tr>
<td rowspan="2">Cel 1</td>
<td>Cel 2</td>
</tr>
<tr>
<td>Cel 3</td>
</tr>
</table>

Je ziet dus rowspan=”2” staan in de regel voor Cel 1. We geven dus aan de browser aan dat Cel 1 de grootte moet aannemen van 2 andere cellen, wat hij vervolgens ook zal uitvoeren.

Een ander voorbeeld met een tabel met 4 rijen en 2 kolommen, waarbij de eerste cel 3 rijen gaat innemen:

<table width="50%" border="1">
<tr>
<td rowspan="3">Cel 1</td>
<td>Cel 2</td>
</tr>
<tr>
<td>Cel 3</td>
</tr>
<tr>
<td>Cel 4</td>
</tr>
<tr>
<td>Cel 5</td>
<td>Cel 6</td>
</tr>
</table>

Dit wordt:

Cel 1	Cel 2
	Cel 3
	Cel 4
Cel 5	Cel 6

De tweede parameter die we konden gebruiken, heeft dit als resultaat:

Cel 1
Cel 2	Cel 3

Dit is op ongeveer dezelfde manier, alleen gebruiken we hiervoor het commando colspan=””. Je ziet in de parameter ‘col’ wat staat voor kolom.
We gaan de browser dus meegeven dat hij een bepaalde cel de grootte moet geven van 2 kolommen.
De broncode van bovenstaande voorbeeld is volgende:

<table width="50%" border="1">
<tr>
<td colspan="2">Cel 1</td>
</tr>
<tr>
<td>Cel 2</td>
<td>Cel 3</td>
</tr>
</table>

Je ziet dat Cel 1 colspan=”2” meekrijgt. We geven dus aan de browser aan dat hij Cel 1 de grootte moet maken van 2 opeenvolgende kolommen.

We kunnen ook een tabel nemen met 3 kolommen en 2 rijen, en hiervan een bepaalde cel de grootte laten maken van 2 cellen.
We krijgen dan volgende HTML code:

<table width="50%" border="1">
<tr>
<td colspan="2">Cel 1</td>
<td>Cel 2</td>
</tr>
<tr>
<td>Cel 3</td>
<td>Cel 4</td>
<td>Cel 5</td>
</tr>
</table>

Dit wordt:

Cel 1		Cel 2
Cel 3	Cel 4	Cel 5

We kunnen ook zeggen dat Cel 1 de grootte moet hebben van 3 kolommen:

<table width="100%" border="1">
<tr>
<td colspan="3">Cel 1</td>
</tr>
<tr>
<td>Cel 2</td>
<td>Cel 3</td>
<td>Cel 4</td>
</tr>
</table>

Dit wordt:

Cel 1
Cel 2	Cel 3	Cel 4

We kunnen in een tabel ook de rowspan=”” en colspan=”” combineren. Dit is een voorbeeldje van een combinatie:

<table width="100%" border="1">
<tr>
<td colspan="3">Cel 1</td>
</tr>
<tr>
<td> Cel 2</td>
<td rowspan="2">Cel 3</td>
<td>Cel 4</td>
</tr>
<tr>
<td>Cel 5</td>
<td>Cel 6</td>
</tr>
</table>

Dit wordt dan:

Cel 1
Cel 2	Cel 3	Cel 4
Cel 5		Cel 6

 

Klik hier om naar hoofdstuk 10 te gaan.