3
Feb

När och hur använder man tabeller?

Att tabeller inte ska användas för layout kan inte ha undgått någon som i alla fall är lite insatt i modern webbutveckling på klientsidan (eller som läst tidigare artiklar här på siten). Detta betyder inte att man aldrig ska använda tabeller, det gäller bara att använda dem på rätt ställe. List-element för listor, p-element för paragrafer av text och table-element för .. ja vad? Detta, samt vilka element en tabell kan innehålla, ska vi försöka reda ut i denna artikel.

Tabeller är enligt W3Cs specifikation tänkta att användas för tabulerande data. Det vill säga text, bilder, etc. som ska ordnas i rader och kolumner. Kommer du ihåg detta när du kodar blir det väldigt lätt att avgöra när en tabell passar in. Ett exempel som lätt kan misstas för en tabell är ett galleri.

Tumnaglarna ordnas med lika stora avstånd från varandra både vertikalt och horisontellt. Det finns inte olika data i de olika kolumnerna, vilket innebär att det egentligen är en lång lista med bilder som har radbrytningar och jämna avstånd. Hade det däremot funnits en bild per rad, och olika information (bildnamn, storlek, typ m.m.) i de olika kolumnerna skulle informationen kvalificerat sig som en tabell.

Att tänka på huruvida datat kan delas in i rader och kolumner hjälper dig att avgöra om en tabell är på sin plats eller inte. Givetvis finns det undantag då CSS förhindrar, eller inte gör det möjligt att man använder till exempel en lista istället för en tabell. I galleriexemplet överst är det väldigt svårt att få jämna, vertikala avstånd på alla rader om tumnaglarna har olika höjd, vilket innebär att man blir tvungen att använda en tabell för att få det snyggt och prydligt.

I sådana fall är det givetvis upp till dig vilken teknik du vill använda. Huvudsaken är att du vägt alternativen mot varandra, har testat och sedan kommit fram till ett svar istället för att bara trycka dit en tabell av gammal vana.

Vilka element finns det då som kan användas vid skapandet av en tabell? Ta en titt på denna korta kodsnutt:



   <table border="1">

      <caption>Tabellens rubrik</caption>

      <thead>

         <tr>

            <th rowspan="2">Namn</th>

            <th rowspan="2">Ålder</th>

            <th colspan="2">Matcher</th>

         </tr>

         <tr>

            <th>Vunna</th><th>Förlorade</th>

         </tr>

      </thead>

      <tbody>

         <tr>

            <td>Lars</td>

            <td>27</td>

            <td>4</td>

            <td>9</td>

         </tr>

         <tr>

            <td>Lisa</td>

            <td>21</td>

            <td>1</td>

            <td>7</td>

         </tr>

         <tr>

            <td>Peter</td>

            <td>24</td>

            <td>7</td>

            <td>2</td>

         </tr>

         <tr>

            <td>Anna</td>

            <td>29</td>

            <td>3</td>

            <td>4</td>

         </tr>

         <tr>

            <td>Bertil</td>

            <td>31</td>

            <td>8</td>

            <td>1</td>

         </tr>

      </tbody>

   </table>

Här är exempelkoden i en färdig sida.

Först har vi table-element som jag tror alla känner till. Sedan kommer ett caption-element som används för att ge tabellen en rubrik och att kortfattat förklara vad som finns i tabellen, detta element är valfritt. Efter detta kommer ett thead-element som används tillsammans med tbody och tfoot för att dela av tabellens innehåll i huvud, kropp och fot (detta exempel innehåller ingen tabellfot). Sedan har vi tr som står för table row och anger en rad i tabellen. Dessa rader delas sedan in i kolumner. Informationen i kolumnerna kan antingen vara th (table header cell - på svenska "rubrikcell") eller en td (table data cell - på svenska "informationscell"). th-elementen används för att beskriva innehållet i de olika kolumnerna och td-elementen används för information.

Attributen rowspan och colspan används för att ange om en cell ska sträcka sig över flera rader (rowspan) eller kolumner (colspan). Genom att experimentera med koden ovan kan du säkert komma underfund med exakt hur dessa värden fungerar.

Att dela in tabellen i huvud, kropp och fot kan ha en stor fördel. Om det är en lång tabell där besökarna kommer att behöva scrolla för att se innehållet kan man med hjälp av lite css få kolumnrubrikerna att ligga kvar överst medans innehållet i tabellkroppen scrollar. Allt man behöver göra är att sätta en fast höjd på tbody-delen och sen sätta css-värdet overflow till auto. Här är ett exempel på hur det ser ut.

Det finns väldigt mycket mer man kan göra med tabeller för att underlätta för människor med olika handikapp men det tar vi upp i en fortsättningsartikel. Hoppas att du nu fått lite mer förståelse för när och hur man använder tabeller. Har du synpunkter, åsikter eller idéer är det bara att gå in på kontaktsidan och skicka ett mail!

TYCKTE DU OM ARTIKELN?

KOMMENTARER

#1. Skriven av David den 20 Mar 2008: Vad anser du då om tabeller när man arbetar med formulär?
#2. Skriven av Stefan den 25 Mar 2008: Hej,
i de flesta fall anser jag att man klarar sig utan tabeller (formulär består oftast inte av tabulerande data), men det finns så klart tillfällen då man är så illa tvungen.

När och hur använder man tabeller?

TYCKTE DU OM ARTIKELN?

KOMMENTARER

SÖK BLAND ARTIKLAR

KATEGORIER

OM KLIENTSIDAN