HTML

Tabeller: colspan och rowspan

De attribut till <th> och <td> du kanske kommer att använda mest är colspan och rowspan. Dessa anger att en cell kan gå över flera kolumner (colspan) eller rader (rowspan).

colspan

Tabellexemplet som använts tidigare saknar, som du antagligen sett, två celler i fjärde kolumnen. Med hjälp av colspan kan man få cellerna i den tredje och fjärde radens tredje kolumn att fylla också den fjärde:

Tabell med colspan
Kolumn 1 Kolumn 2 Kolumn 3 Kolumn 4
Kolumn 1 Kolumn 2 Kolumn 3 Kolumn 4
Item Item Item Item
Item Item Item
Item Item Item 
<table class="tabellexempel">
   <caption>Tabell med colspan</caption>
   <thead>
      <tr>
         <th>Kolumn 1</th>
         <th>Kolumn 2</th>
         <th>Kolumn 3</th>
         <th>Kolumn 4</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Kolumn 1</th>
         <th>Kolumn 2</th>
         <th>Kolumn 3</th>
         <th>Kolumn 4</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
      </tr>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td colspan="2">Item</td>
      </tr>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td colspan="2">Item</td>
      </tr>
   </tbody>
</table>

colspan="2" i exemplet anger att just den cellen ska spänna över två kolumner.

rowspan

Om man i stället vill att den sista cellen i den fjärde kolumnen ska ta upp tre rader, använder man rowspan:

Tabell med rowspan
Kolumn 1 Kolumn 2 Kolumn 3 Kolumn 4
Kolumn 1 Kolumn 2 Kolumn 3 Kolumn 4
Item Item Item Item
Item Item Item
Item Item Item 
<table class="tabellexempel">
   <caption>Tabell med rowspan</caption>
   <thead>
      <tr>
         <th>Kolumn 1</th>
         <th>Kolumn 2</th>
         <th>Kolumn 3</th>
         <th>Kolumn 4</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Kolumn 1</th>
         <th>Kolumn 2</th>
         <th>Kolumn 3</th>
         <th>Kolumn 4</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
         <td rowspan="3">Item</td>
      </tr>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
      </tr>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
      </tr>
   </tbody>
</table>

Både colspan och rowspan

Imse vimse spindel…
Imse vimse spindel klättrade uppför trå'n
Imse vimse spindel klättrade uppför trå'n
Imse vimse spindel klättrade uppför
Imse vimse spindel klättrade uppför trå'n
Imse vimse spindel
klättrade
vimse spindel klättrade uppför trå'n 
<table class="tabellexempel">
    <caption>Imse vimse spindel&hellip;</caption>
    <thead>
        <th>Imse</th>
        <th>vimse</th>
        <th>spindel</th>
        <th>klättrade</th>
        <th>uppför</th>
        <th>trå'n</th>
    </thead>
    <tfoot>
        <th>Imse</th>
        <th>vimse</th>
        <th>spindel</th>
        <th>klättrade</th>
        <th>uppför</th>
        <th>trå'n</th>
    </tfoot>
    <tbody>
        <tr>
            <td colspan="2">Imse</td>
            <td>vimse</td>
            <td>spindel</td>
            <td>klättrade</td>
            <td>uppför</td>
        </tr>
        <tr>
            <td>Imse</td>
            <td>vimse</td>
            <td>spindel</td>
            <td>klättrade</td>
            <td>uppför</td>
            <td>trå'n</td>
        </tr>
        <tr>
            <td colspan="4" rowspan="2">Imse</td>
            <td rowspan="3">vimse</td>
            <td>spindel</td>
        </tr>
        <tr>
            <td>klättrade</td>
        </tr>
        <tr>
            <td>vimse</td>
            <td>spindel</td>
            <td>klättrade</td>
            <td>uppför</td>
            <td>trå'n</td>
        </tr>
    </tbody>
</table>