Sidjämförelse

Exempel

...

Designspecifikation

För desktop finns tabeller i två bredder: 620 px och utfallande 833 px.

Utfallande tabeller fyller ut till vänster i griden och används då man har tabeller med mycket innehåll och många kolumner.

Tabeller får scroll i sidled i mobil.

Normen att ha textstorlek 14px-16px, där vi rekommenderar 16px men skulle det vara så att det behövs mindre text av någon anledning så får man använda 14px. Detta är förutsatt att användaren kan förstora texten upp till 200% utan att innehåll eller funktionalitet förloras.

Do’s and Don’ts

• Använd utfallande tabeller om det finns mycket innehåll och kolumner.

Tillgänglighet

• Korrekt kodade tabeller är i sin natur tillgängliga för många användare för de grupperar information så att man förstår hur saker hör ihop, det är dock extra viktigt att detta görs rätt för att inte skapa förvirring.

• Tabeller ska ha en <table>-tagg för att definiera att det är en tabell. Se även till att det finns korrekt användning av tr, th, td.

• Det kan vara bra för extra tydlighet att använda <caption> som en överskrift/rubrik till tabellen. Caption är en överskrift/rubrik för tabellen som kort förklarar innehållet. Placerad i table-elementet.

• Använda scope-attributet för att beskriva riktningen på en <th>. (För enkla tabeller räcker det om tabellrubriken i attributet scope anger att den avser kolumnen (värdet ”col”) eller raden (värdet ”row”))

• För komplexa tabeller använd kompletterande kod för att göra den mer begriplig.

• För att förbättra upplevelsen för många se till att man inte behöver skrolla vertikalt för att få del av innehållet i tabellen.

Research på komponenten

-

Relaterade resurser/komponenter

Status

...

Status

...

...

Publicerad

...

2020-01-18

...

Senast uppdaterad

...

Vi har två olika typer av tabeller: informationstabell och datatabell.