Webboken

Tabeller

Eller, ”Hata mig inte för vad jag gjort i mitt tidigare liv”

Tabellers syfte är det samma som dess namn, d.v.s. att upprätthålla (i brist på ett bättre ord) tabeller. Dessa tabeller ska inte innehålla annat än vad vanliga tabeller bör innehålla, d.v.s. data om olika saker, något som ibland kallas för ”tabulär data”. Varför är vi så noga och övertydliga med detta då? Jo, i en inte allt för avlägsen dåtid så var det populärt att använda tabeller för att bestämma layout på ens webbplats, t.ex. var ens meny skulle placeras. Detta är dock ett felaktigt sätt att använda tabeller på. Det leder till en rad problem för både dig som utvecklare och dina besökare; mer om dessa äventyr i kapitlet om layout, senare.

Ett enklare test huruvida en tabell är ett lämpligt sätt att märka upp är: har innehållet i en cell någon relation till något innehåll i både dess rad och kolumn?

Grundläggande tabeller: data- och rubrikceller

Låt oss inleda med ett exempel på hur en tabell (som att du inte sett en tidigare!) ser ut i din webbläsare (vi har dock stilat tabellerna något med egen CSS, så det är inte en ”naken” eller ”ren” tabell i någon mening):

Planetfakta
Planet Diameter [km] Avstånd till solen [miljoner km]
Tellus 12 756,3 ~150
Mars 6 794,4 ~230
Jupiter 142 984 ~780

Och för att producera detta exempel användes:

<table>
  <caption>Planetfakta</caption>

  <tr>
    <th>Planet</th>
    <th>Diameter [km]</th>
    <th>Avstånd till solen [miljoner km]</th>
  </tr>

  <tr>
    <td>Tellus</td>
    <td>12 756,3</td>
    <td>~150</td>
  </tr>

  <tr>
    <td>Mars</td>
    <td>6 794,4</td>
    <td>~230</td>
  </tr>

  <tr>
    <td>Jupiter</td>
    <td>142 984</td>
    <td>~780</td>
  </tr>
</table>

Av det går det att utläsa:

Dessa fem enkla element är en tabells grund, och användingen av dem borde vara ganska självklara. För att bygga upp en bra och genomtänkt tabell kan det ibland behövs det flera element och attribut, dessa tänkte vi gå igenom senare.

caption-elementet är frivilligt, så det kan utelämnas om det är lämpligt att göra så. Att ändra presentationen på tabeller delar många likheter med design av en hel webbplats, t.ex. bakgrundfärg på vissa celler eller rader, och ev. kantramar runt dessa eller hela tabellen. Även detta kommer skjutas upp till designdelen alltså. Det vi talar om nu angående presentation av tabeller är att egenskapen caption-side talar om huruvida tabellrubriken ska visas under eller över tabellen, med värdet bottom resp. top, t.ex.:

caption {caption-side:bottom;}

Attributet ingen brydde sig om: summary

Attributet summary är nu förlegat, i och med HTML5, och används inte längre. Det skulle användas då tabellen var rätt så omfattande och innehöll mycket data. Attributet renderas inte i visuella webbläsare, däremot har de som måste använda sig utav skärmläsare stor nytta av det. Då de inte på samma sätt har någon möjlighet att få en överblick över tabellen på samma sätt som de med visuella webbläsare. De hör då vad tabellen handlar om innan de riktar sin uppmärksamhet mot själva tabellen, detta gör att de kan välja om de vill höra vad tabellen innehåller eller ej.

Det låter ju inte som någon dum ide? Varför ta bort det då? Jo, ingen använde det och det fungerar lika bra att använda ett t.ex. p-element innan tabellen för att ge en sammanfattning. Så om du får syn på det någon gång vet du vad det är (inte så troligt då ingen använda det). Tänk på att om du nu vill ha med en sammanfattning att den ska vara kort och koncist då en person ska orka med att lyssna igenom texten.

Något mer avancerade tabeller: rowspan och colspan

För något mer avancerade tabeller kan mer märkkod behövas för att semantiken ska vara klar och tydlig; eller ens för att kunna bygga tabellen som du tänkt. Ta t.ex. följande tabell som exempel:

Planetfakta
Planet Diameter [km] Avstånd till solen [miljoner km]
Ekvatorn Pol till Pol
Tellus 12 756,3 12 713,5 ~150
Mars 6 794,4 6 754,8 ~230
Jupiter 142 984 133 709 ~780

Koden till ovanstående tabell:

<table>
  <caption>Planetfakta</caption>

  <tr>
    <th rowspan="2">Planet</th>
    <th colspan="2">Diameter [km]</th>
    <th rowspan="2">Avstånd till solen [miljoner km]</th>
  </tr>

  <tr>
    <th>Ekvatorn</th>
    <th>Pol till Pol</th>
  </tr>

  <tr>
    <td>Tellus</td>
    <td>12 756,3</td>
    <td>12 713,5</td>
    <td>~150</td>
  </tr>
  
  <tr>
    <td>Mars</td>
    <td>6 794,4</td>
    <td>6 754,8</td>
    <td>~230</td>
  </tr>

  <tr>
    <td>Jupiter</td>
    <td>142 984</td>
    <td>133 709</td>
    <td>~780</td>
  </tr>
</table>

rowspan-attributet används då du vill att en cell i tabellen ska sträcka sig över en eller flera horisontella rader. Detta ser du exempel på i tabellen och koden ovan. colspan-attributet används på samma sätt som rowspan med skillnaden att det handlar om vertikala rader istället för horisontella sådana.

Ännu mer avancerade tabeller: vidare läsning

Vi har gått igenom en del grundläggande saker att tänka på när du bygger tabeller, följande går in mer djupgående på problemet:

Techniques for WCAG 2.0 innehåller en del relevanta punkter för mer specifika ämnen angående tabeller: