Mar
Tabeller på djupet
Kategorier: (X)HTML WebstandarderNu är det dags att borra sig lite djupare ner i tabellträsket genom att se på lite mer ovanliga attribut och hur de kan användas. Det mesta, men inte allt, i artikeln är till för att underlätta för folk med olika sorters handikapp.
Den förra artikeln tog upp när och hur man använder tabeller och gick igenom de vanligaste elementen som ingår i en tabell. Har du ännu inte läst den och känner dig osäker på de element som finns tillgängliga när man skapar tabeller är det dags att läsa den nu.
Det finns mycket man kan göra för att få en tabell mer tillgänglig för de som använder till exempel textläsare, som läser innehållet högt för den som surfar.
En första enkel sak man kan göra är att sätta attributet "summary" på table-elementet. Detta attribut ska innehålla en lite längre förklaring av vad tabellen innehåller än caption-elementet:
<table summary="En exempeltabell för klientsidan som visar lite...">
Vidare finns det flera olika sätt att gruppera kolumner och associera data i olika celler med de olika kolumnerna.
Elementen col och colgroup är till för gruppera kolumner. De ska komma efter ett eventuellt caption-element men före thead. Båda dessa element tar emot attributet "span" som berättar hur många kolumner varje element täcker. Följande kod visar hur en tabell med 3 kolumner skulle kunna se ut:
<table>
<caption>En exempeltabell</caption>
<colgroup span="2"></colgroup>
<col>
<thead>
...
</table>
Kom ihåg att enligt HTML-standarden behöver inte col-elementet stängas, men i XHTML bör det avslutas med "/>".
Både col och colgroup har som standard värdet 1 på "span" ända tills man sätter själva attributet till något annat värde, eller om man sätter minst ett col-element inuti ett colgroup:
<colgroup span="3">
<col>
<col>
</colgroup>
Koden ovan skulle innebära att colgroup-elementet sträckte sig över två kolumner och inte tre. Antalet col-element inuti colgroup har högre prioritet än "span"-attributet.
Med hjälp av CSS kan man nu bland annat sätta bakgrundsfärg och bredd kolumnvis genom att ge elementen till exempel en klass. Tyvärr implementerar inte webbläsare som baseras på Geckomotorn (Firefox, Mozilla med flera) col och colgroup på ett särskilt bra sätt vilket innebär att man fråntas möjligheten att exempelvis positionera text kolumnvis. Detta fungerar dock i Internet Explorer 6 och 7. Här finns en exempelsida där du kan se koden och hur den påverkar tabellen.
För att associera information i dataceller med olika rubrikceller kan attributen headers och scope användas. För att använda headers behöver först varje rubrikcell (th) märkas upp med ett id. Sedan sätts attributet headers i varje datacell till id-värdet för tillhörande rubrik. Kom ihåg att headers kan hänvisa till flera id som då separeras med ett mellanslag.
<tr>
<th id="a1">Namn</th>
<th id="a2">Skostorlek</th>
<th id="a3" abbr="färg">Favoritfärg på sko</th>
</tr><tr>
<td headers="a1">Arne</td>
<td headers="a2">42</td>
<td headers="a3">Blå</td>
</tr>
I koden ovan har attributet headers använts för att koppla en datacell till en rubrik. Attributet abbr har använts för att ge en förkortad rubrik. En textläsare skulle då kunna presentera datat på detta sätt:
Namn: Arne, Skostorlek: 42, Färg: blå
Samma exempel fast med attributet scope skulle se ut på detta sätt:
<tr>
<th scope="col">Namn</th>
<th scope="col">Skostorlek</th>
<th scope="col" abbr="färg">Favoritfärg på sko</th>
</tr><tr>
<td>Arne</td>
<td>42</td>
<td>Blå</td>
</tr>
Scope gör alltså samma sak som headers, fast för hela kolumner eller rader. Scope kan sättas till värdet "row" eller "col" och rubriken associeras då med data i raden respektive kolumnen.
Ett mer avancerat exempel där betydelsen av scope framgår bättre är en tabell där det finns en rad med rubrikceller och en kolumn med rubrikceller.
Här sätts scope till värdet "col" i den övre rubrikraden, och till "row" i rubrikkolumnen till vänster. Sedan är det lätt för en textläsare att ge information om exakt var i tabellen den befinner sig samt vad värdet i den aktuella datacellen betyder. Nu blir det givetvis lite mycket siffror i tabellen ovan men hur scope används framgår bra.
Det finns ett attribut kvar som den här artikeln ska ta upp och det är axis. För att kategorisera innehållet i än mer komplexa tabeller används just axis.
<td axis="Plats">Stockholm</td>
Detta skulle ge möjlighet till en textläsare att sortera bort information som tillhör flera celler och därför blir överflödig att läsa varje gång. Istället för att läsa innehållet i en komplex tabel på följande sätt:
Skulle innehållet kunna läsas upp så här:
Det var allt för den här gången, och jag tror att det mesta som finns att skriva om tabeller nu har skrivits. Har du kritik, förslag eller åsikter om artikeln är du välkommen att maila eller lämna en kommentar!
TYCKTE DU OM ARTIKELN?
