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 rowspan kan man få cellerna i den tredje och fjärde radens tredje kolumn att fylla också den fjärde:

<table>
   <caption>En viktig tabell</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>
Vilket ser ut så här:
En viktig tabell
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

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

Rowspan

Om jag i stället vill att den sista cellen i den fjärde kolumnen ska ta upp tre rader, använder jag mig av rowspan på samma sätt:

<table>
   <caption>En viktig tabell</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>
vilket ger:
En viktig tabell
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

Den fjärde cellen i första raden spänner över tre rader genom rowspan="3"

Ett mer avancerat exempel

Kolla gärna källkoden.

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 trå'n
Imse vimse spindel klättrade uppför
Imse vimse spindel
Imse vimse spindel klättrade uppför
vimse spindel klättrade uppför

Fortsätt läsa om kolumngrupper i tabeller… →