Tabeller: rowspan og colspan

Tabeller kan ha virket komplisert nok når vi så på dem tidligere. Det kan være vanskelig å visualisere en todimensjonelt rutenett fra endimensjonale linjer med koder.

Vel, det blir enda verre – takket være rowspan- og colspan-attributtene. De teitingene.

Dette er kode som er ganske lik det vi kikket på tidligere:

<table>
  <tr>
    <th>Kolonne 1 overskrift</th>
    <th>Kolonne 2 overskrift</th>
    <th>Kolonne 3 overskrift</th>
  </tr>
  <tr>
    <td>Rad 2, celle 1</td>
    <td colspan="2">Rad 2, celle 2, strekker seg til Rad 2, celle 3</td>
  </tr>
  <tr>
    <td rowspan="2">Rad 3, celle 1, strekker seg til Rad 4, celle 1</td>
    <td>Rad 3, celle 2</td>
    <td>Rad 3, celle 3</td>
  </tr>
  <tr>
    <td>Rad 4, celle 2</td>
    <td>Rad 4, celle 3</td>
  </tr>
</table>

Header-celler

Header-celler

Den første forskjellen er at den første raden med td-tag’er har blitt byttet med th. td står for «table data», mens th står for «table heading». Akkurat som td-elementer må th-elementer holdes inni tr-elementer, «table row».

Strekking av rader og kolonner

Strekking av rader og kolonner

Som du ser har noen td-tag’er fått colspan og rowspan attributter. Hvis du tester dette i en nettleser får du et mye tydeligere visuelt inntrykk av hvordan det fortoner seg, men kort fortalt kan man spenne flere kolonner med colspan (column span), eller flere rader med rowspan.