HTML skola
Colspan

Colspan

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

Exempel:

Colspan Kolumn 3 – Rad 1
Kolumn 1 – Rad 2 Kolumn 2 – Rad 2 Kolumn 3 – Rad 2

Attributet colspan

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

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

HTML kod

<table border="1">
<tr>
<td colspan="2">Colspan</td>
<td>Kolumn 3 - Rad 1</td>
</tr>
<tr>
<td>Kolumn 1 - Rad 2</td>
<td>Kolumn 2 - Rad 2</td>
<td>Kolumn 3 - Rad 2</td>
</tr>
</table>

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

Fler colspan exempel

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

HTML kod

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

Colspan kan orsaka problem

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

Colspan Cell
Cell Cell
Cell Cell

Colspan och rowspan

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

| Mer