Col/Rowspan

Na de inleiding in tabellen wordt het nu tijd voor wat verdieping. De mogelijkheden met tabellen zijn eindeloos. Deze hele pagina is opgebouwd met een tabel met daarin weer nieuwe tabellen.

Het principe van tabellen is vrij simpel. Je hebt een tabel met rijen en met een cellen. Als je een pagina in wilt gaan delen zul je eerst goed moeten bedenken hoe het eindresultaat moet zijn. Het beste is altijd nog om even een kleine schets te maken op papier. Hier gaan we nu eerst beginnen met rowspan en colspan.

Rowspan

Zo nu en dan wll je een aantal rijen samenvoegen of juist een aantal cellen. In dat geval moet je gebruik maken van de attributen rowspan en colspan bij het element <td>. Rowspan voegt een aantal rijen samen en werkt dus verticaal. Colspan voegt een aantal cellen samen en werkt dus horizontaal.

<table width="250" border="1" cellspacing="0" cellpadding="0">
<tr>
 <td width="25%" rowspan="2">Tekst A</td>
 <td width="25%" rowspan="2">Tekst B</td>
 <td width="25%">Tekst C</td>
 <td width="25%">Tekst D</td>
</tr>
<tr>
 <td width="25%">Tekst E</td>
 <td width="25%">Tekst F</td>
</tr>
</table>

Colspan

<table width="250" border="1" cellspacing="0" cellpadding="0">
<tr>
 <td width="50%" colspan="2">Tekst A</td>
 <td width="25%">Tekst B</td>
 <td width="25%">Tekst C</td>
</tr>
<tr>
 <td width="25%">Tekst D</td>
 <td width="25%">Tekst E</td>
 <td width="25%">Tekst F</td>
 <td width="25%">Tekst G</td>
</tr>
</table>