Efter lektion 10 lyder overskriften "Flere tabeller" måske som et mareridt. Det positive er, at når du først mester tabellerne, er der absolut intet i HTML-verdenen, der kan slå dig ud.
colspan og rowspan er attributter og meget nyttige, når du skal lave tabeller på den seje måde.
colspan er en forkortelse af "column span" - på dansk: "kolonne spændvidde". Attributten bruges i <td>-taget til at angive, hvor mange kolonner cellen skal spænde over:
Eksempel 1:
<table border="1">
<tr>
<td colspan="3">Celle 1</td>
</tr>
<tr>
<td>Celle 2</td>
<td>Celle 3</td>
<td>Celle 4</td>
</tr>
</table>
Vil se sådan ud i browseren:
| Celle 1 | ||
| Celle 2 | Celle 3 | Celle 4 |
Ved at sætte colspan="3" spænder cellen i den første række over tre kolonner. Havde jeg sat colspan="2" havde cellen kun spændt over 2 kolonner, og det havde været nødvendigt at indsætte yderligere en celle i den første rækken, så antallet af kolonner passer sammen i de to rækker.
Eksempel 2:
<table border="1">
<tr>
<td colspan="2">Celle 1</td>
<td>Celle 2</td>
</tr>
<tr>
<td>Celle 3</td>
<td>Celle 4</td>
<td>Celle 5</td>
</tr>
</table>
Vil se sådan ud i browseren:
| Celle 1 | Celle 2 | |
| Celle 3 | Celle 4 | Celle 5 |
rowspan kan oversættes til "række spændevidde", og som du måske allerede har gættet angiver rowspan, hvor mange rækker en celle skal spænde over:
Eksempel 3:
<table border="1">
<tr>
<td rowspan="3">Celle 1</td>
<td>Celle 2</td>
</tr>
<tr>
<td>Celle 3</td>
</tr>
<tr>
<td>Celle 4</td>
</tr>
</table>
Vil se sådan ud i browseren:
| Celle 1 | Celle 2 |
| Celle 3 | |
| Celle 4 |
I eksemplet ovenfor er rowspan sat til "3" i Celle 1. Det betyder, at cellen skal spænde over 3 rækker (sin egen række plus to mere). Celle 1 og Celle 2 er altså i samme række, mens Celle 3 og Celle 4 udgør to selvstændige rækker.
Forvirret? Jamen, det er heller ikke helt nemt, og man mister hurtigt overblikket. Det kan derfor være en god idé at tegne tabellen på et stykke papir, før man går i gang med den i HTML.
Hvis du ikke er forvirret, kan du prøve selv at lave et par tabeller med både colspan og rowspan - så skal du nok blive det.
