Tabeller

• Uden ramme
• Zebralinjer
• Responsiv
• Linjehøjde
• Sortering i tabeller
• Søgning i tabeller
• Valgbare rækker
• Strukturerede lister
• Avancerede tabeller

Tabeller er en systematisk opstilling af data i kolonner og rækker.

Anvendes til

Tabeller anvendes til at præsentere brugeren for data som fx statistik opstillet i rækker og kolonner.

Anvendes ikke til

Anvend ikke tabeller til at opsætte en sides eller en komponents indhold udover data.

Anvend ikke tabeller til visning af simple informationer uden kolonneoverskrifter, da tabeller ifølge WCAG altid bør have kolonneoverskrifter.

Vejledning

Tabeller er en kompleks størrelse og når du bruger tabeller, skal du sikre dig, at din opmærkning overholder tilgængelighedskravene.

Vær meget opmærksom på typen af data, din tabel skal præsentere brugeren for.

Såfremt der er tale om meget avancerede tabeller, kan der bruges en tredjepartsløsning.

Tal i tabeller bør højrestilles og have samme antal decimaler, når der er tale om en numerisk størrelse som f.eks. antal eller pengebeløb. Dette gør det lettere for brugeren at skimme og sammenligne numerisk data (Rutter, 2017). Tal, der ikke angiver en numerisk størrelse og dermed ikke indebærer et behov for sammenligning, skal ikke højrestilles. Det kan f.eks. være et ID-nummer.

Tabeller do's and don'ts

Sådan (do)

Sådan: Brug tabeller, når læserne har brug for at finde specifikke oplysninger eller sammenligne dem ud fra flere parametre (Rost, 2019).

Ikke sådan (don't)

Ikke sådan: Brug ikke tabeller, hvis der kun er ét parameter; brug i sådanne tilfælde en liste i stedet. Brug heller ikke tabeller, hvis den vigtigste pointe er at vise et mønster, fx en udvikling; brug i sådanne tilfælde grafer i stedet (Rost, 2019).

Referencer

• Lisa Charlotte Rost: What to consider when creating tables (2019)
• Richard Rutter: Web Typography: Designing Tables to be Read, Not Looked At (2017)
• Amy Schade: Mobile Tables: Comparisons and Other Data Tables (2017)
• W3C: F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers (2016)

Se komponenten i eksempelløsninger

• Trinformular til registrering: Vælg noget mere
• Trinformular til registrering: Opsummering
• Trinformular til ansøgning: Tilføj dokumentation
• Sagsoversigt: Find sag

Uden ramme

Zebralinjer

Zebralinjer anbefales kun til længere tabeller med mange rækker og kolonner, da brugeren kan tillægge få mørke rækker betydning, som om de var særligt markeret (Rost, 2019).

Responsiv

Bemærk, at det i nogle tilfælde kan være en bedre løsning at lade lange tabeller scrolle horisontalt på mobil frem for at anvende en responsiv tabel (Schade, 2017). Det kan fx være i tilfælde, hvor sammenligning af data fra forskellige rækker er vigtig. Udfør brugertests for at vurdere den bedste mobile tabelvisning for den enkelte løsning.

Linjehøjde

Sortering i tabeller

Store tabeller med mange rækker bør kunne sorteres. Kolonner sorteres ved at klikke på kolonnens sorteringsikon.

Når sortering vælges, sorteres per default stigende. Klikkes der på et aktivt sorteringsikon, bliver der togglet mellem stigende (A-Å eller 0-9) og faldende (Å-A eller 9-0) sortering.

Tabeller med sortering skal altid have en aktiv sortering; sorteringen kan ikke deaktiveres. Standardsortering vælges ud fra, hvilken kolonne brugerne som regel vil forvente er sorteret. Dette vil ofte være den første kolonne eller en dato.

Hvis kun få kolonner i en tabel kan sorteres, kan komponenten Sortering med overflow menu anvendes i stedet.

Ved sortering af responsive tabeller på mobil anvendes i stedet komponenten Sortering med overflow menu.

Søgning i tabeller

Søgefelt til tabeller kan anvendes til store tabeller, der har mange rækker og kolonner. Brug kun søgning i tabeller, hvis det hjælper brugeren med at navigere i tabellen. Søgning i tabeller bør ikke anvendes, hvis en simpel sortering er tilstrækkelig for, at brugerne kan navigere effektivt i tabellen.

Tabeller kan søges med et søgefelt placeret over tabellen. Feltet søger som udgangspunkt alt data i tabellen. Tabellen opdateres ved klik på knappen “Søg” eller ved tasten “Enter”.

Valgbare rækker

Valgbare rækker med funktionsknapper

Hvis der kan udføres særlige funktioner for de valgte rækker, placeres funktionsknapper under tabellen. Brug ikke disabled knapper, når der ikke er nogen valgte rækker, da disabled knapper er svære at læse og forstå for nogle brugere. Vis i stedet en hjælpetekst ved knapperne, hvis de bliver klikket, før der er valgt en eller flere rækker.

Strukturerede lister

Strukturerede lister opstiller simple informationer på en letlæselig måde.

Anvendes til

Strukturerede lister anvendes til at vise informationer, der er opstillet i et simpelt format med titler og dertilhørende information. Strukturerede lister anvendes blandt andet til opsummeringssider i formularer.

Anvendes ikke til

Anvend ikke strukturerede lister til komplekse og sammenlignelige datasæt, der er opsat i flere kolonner med kolonneoverskrifter.

Vejledning

• Hvis der er flere lister på samme side, bør alle lister have samme bredde for at holde siden overskuelig.
• Begræns antallet af rækker i hver liste, så mængden af informationer ikke bliver uoverskuelig for brugeren. Hvis der er mange rækker med information, så overvej, om det giver mening at dele listen op i afsnit ved hjælp af overskrifter.
• På opsummeringssider i forbindelse med formularer i flere trin kan hver række i listen indeholde et redigeringslink, som viser tilbage til det relevante sted i formularen.

Se komponenten i eksempelløsninger

• Formular til kontaktoplysninger: Bekræft oplysninger
• Trinformular til registrering: Kvittering
• Sagsoversigt: Sagsnr. 123456789

Struktureret liste med link

Avancerede tabeller

Vi tilbyder på nuværende tidspunkt ikke avancerede tabeller, men hvis man finder eller laver en selv, kan det se ud som på billedet nedenfor.

Udfoldelig række

Rediger og slet en række