HTML Tabellen

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie tabellen | Eenvoudige tabellen | Samenvoegen cellen | Uitlijnen celinhoud | Uitlijnen tabel | Bijschrift bij tabel | Tabelranden | Achtergrond tabel | Rijgroepen | Kolomgroepen | Kader en lijnen | Voorrangsregels bij uitlijnen

Gerelateerde elementen: CAPTION | COL | COLGROUP | TABLE | TBODY | TD | TFOOT | TH | THEAD | TR


Samenvoegen van cellen

Opeenvolgende cellen kunnen zowel in horizontale als in verticale richting worden samengevoegd. Voor het samenvoegen in verticale richting gebruik je het ROWSPAN attribuut van het TD (of TH) element, voor het samenvoegen in horizontale richting het COLSPAN attribuut.

In het volgende voorbeeld wordt de eerste cel in de eerste rij met het ROWSPAN attribuut samengevoegd met de onderliggende cellen in de volgende twee rijen. In de tweede en derde rij hoeven er daardoor slechts twee cellen gedefinieerd te worden.

<TABLE BORDER="1" WIDTH="50%">
<TR>
<TD ROWSPAN="3" HEIGHT="100">abc1</TD><TD>a2</TD><TD>a3</TD>
</TR>
<TR>
<TD>b2</TD><TD>b3</TD>
</TR>
<TR>
<TD>c2</TD><TD>c3</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

abc1 a2 a3
b2 b3
c2 c3


In het vorige voorbeeld worden nu de overblijvende cellen in de tweede rij samengevoegd met het COLSPAN attribuut.

<TABLE BORDER="1" WIDTH="50%">
<TR>
<TD ROWSPAN="3" HEIGHT="100">abc1</TD><TD>a2</TD><TD>a3</TD>
</TR>
<TR>
<TD COLSPAN="2">b23</TD>
</TR>
<TR>
<TD>c2</TD> <TD>c3</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

abc1 a2 a3
b23
c2 c3


Je kunt de attributen ROWSPAN en COLSPAN ook tegelijkertijd voor een cel gebruiken.

<TABLE BORDER="1" WIDTH="50%">
<TR>
<TD HEIGHT="30">a1</TD><TD ROWSPAN="2" COLSPAN="2">a2b3</TD>
</TR>
<TR>
<TD HEIGHT="30">b1</TD>
</TR>
<TR>
<TD HEIGHT="30">c1</TD><TD>c2</TD><TD>c3</TD>
</TR>
</TABLE>

De browser voegt de vier cellen rechtsboven in de tabel samen:

a1 a2b3
b1
c1 c2 c3


Vervolg: Uitlijnen celinhoud


Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 5 december 2004