Tabeller för tabelldata

Den ursprungliga tanken med table-elementet var att presentera data i tabellform, till exempel forskningsresultat, statistik etc. Innan CSS fanns eller var så väl utbyggt, började dock webbdesigners att i stor grad använda ”osynliga” tabeller för layout av webbsidor och man stöter fortfarande på många sidor som byggts upp på detta sätt. Nu är stödet för CSS mycket bättre så det finns ingen ursäkt för användning av tabeller i layoutsyfte!

Jag kommer här endast att visa hur tabeller för presentation av data kan byggas upp. Senare i kursen går vi igenom hur man skapar layout av hela sidor med hjälp av CSS.

Den allra enklaste tabellen byggs upp med hjälp av följande HTML-element:

<table></table> = det element som talar om att en tabell ska skapas
<tr></tr> = table row
<th></th> = table header
<td></td> = table data

Exempel på en tabell:

XHTML-kod för enkel tabell.

Skapar man stora tabeller är det många taggar att hålla reda på men om vi tittar på hur tabellen ovan ser ut i webbläsaren är den inte speciellt komplicerad:

Enkel tabell i webbläsaren.

För att göra tabellen lite mer lättläst kan man lägga till lite utrymme mellan cellerna och/eller lite ”luft” inuti cellerna. Med attributen cellspacing och cellpadding kan du åstadkomma detta. I tabellen nedan har jag även lagt till ramlinjer (border).

Tabell med cellspacing, cellpadding och border.

I webbläsaren framträder nu tabellstrukturen lite tydligare.

Tabell med border, cellspacing och cellpadding i webbläsaren.

Ibland behöver man göra lite mer avancerade tabeller med celler som spänner över flera andra celler och man använder då attributen colspan och rowspan, där colspan talar om att cellen ska spänna över ett visst antal kolumner och rowspan över ett visst antal rader. Nedan ser du exempel på en tabell där tabellrubriken spänner över två kolumner. Det viktiga är att då plocka bort vissa element som blir överflödiga. Prova!

Tabell med colspan.

Nedan har nu istället två celler i kolumn 1 slagits samman med hjälp av attributet rowspan.

Tabell med rowspan.

Tips! Läs mer om tabeller och prova på att skapa dem i w3schools editor online: http://w3schools.com/html/html_tables.asp

I boken ”Universal Usability”  av Sarah Horton kan du läsa mer om hur du skapar tillgängliga tabeller: http://universalusability.com/access_by_design/data_tables/index.html

 

Stilmall?

Du kan i stilmallen bestämma hur dina tabeller ska visas. Prova exempelvis att använda följande egenskaper på table- eller td-elementen när du skapar en stilmall (CSS-fil):

  • border
  • border-collapse
  • padding
  • border-spacing
  • width
  • vertical-align
  • background

Leave a Reply