HTML skola
Rowspan

Rowspan

Med attributet ”rowspan” kan man låta celler i tabeller spänna över flera rader.

Exempel:

Rowspan Kolumn 2 – Rad 1 Kolumn 3 – Rad 1
Kolumn 2 – Rad 2 Kolumn 3 – Rad 2

Attributet rowspan

Attributet ”rowspan” tillhör <td> och <th> elementet.

Exemplet nedan visar HTML koden för tabellen ovanför.

HTML kod

<table border="1">
<tr>
<td rowspan="2" rowspan="2">Rowspan</td>
<td>Kolumn 2 - Rad 1</td>
<td>Kolumn 3 - Rad 1</td>
</tr>
<tr>
<td>Kolumn 2 - Rad 2</td>
<td>Kolumn 3 - Rad 2</td>
</tr>
</table>

Värdet på attributet ”rowspan” är ett heltal som anger antalet rader som cellen ska spänna över.

Fler rowspan exempel

Kolumn 1 – Rad 1 Kolumn 2 – Rad 1,2 och 3 Kolumn 3 – Rad 1
Kolumn 1 – Rad 2 Kolumn 3 – Rad 2 och 3
Kolumn 1 – Rad 3

HTML kod

<table border="1">
<tr>
<td>Kolumn 1 - Rad 1</td>
<td rowspan="3">Kolumn 2 - Rad 1,2 och 3</td>
<td>Kolumn 3 - Rad 1</td>
</tr>
<tr>
<td>Kolumn 1 - Rad 2</td>
<td rowspan="2">Kolumn 3 - Rad 2 och 3</td>
</tr>
<tr>
<td>Kolumn 1 - Rad 3</td>
</tr>
</table>

Rowspan kan orsaka problem

När rowspan används är det viktigt att ta bort extra celler från tabellen. Exemplet nedan visar vad som händer annars:

Rowspan Cell
Cell Cell
Cell Cell

Rowspan och colspan

Attributet colspan fungerar på samma sätt som rowspan fast med kolumner. Läs mer om colspan.

| Mer