Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Tabeller

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

Eksempel på tabel
Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir, pap eller plastik der ikke kan genanvendes, fordi der er madrester eller andet snask på. Alt det affald, du smider ud i din primære skraldespand, som er dagrenovationen, bliver hentet og kørt på forbrændingen.
Bioaffald og kompost Beige Alt madaffald uden fødevareemballage. Bioaffaldet kommes i bionedbrydelige poser, som bliver komposteret til muld.
Glas Hvid Alle typer glas og flasker. De hele vinflasker rengøres og genbruges af vinhuse, mens glasskårene bliver smeltet om til nyt glas.
Elektronik Orange Genstande der har brugt strøm. Det elektroniske affald bliver typisk kørt til et demonteringsanlæg, hvor det bliver skilt ad, så de forskellige dele kan genanvendes separat.

Retningslinjer

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)

Eksempel på, hvordan en tabel kan se ud

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)

Eksempel på, hvordan en tabel ikke bør se ud

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).

Se komponenten i eksempelløsninger

Referencer

Varianter

Uden ramme

Eksempel på tabel uden ramme
Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir, pap eller plastik der ikke kan genanvendes, fordi der er madrester eller andet snask på. Alt det affald, du smider ud i din primære skraldespand, som er dagrenovationen, bliver hentet og kørt på forbrændingen.
Bioaffald og kompost Beige Alt madaffald uden fødevareemballage. Bioaffaldet kommes i bionedbrydelige poser, som bliver komposteret til muld.
Glas Hvid Alle typer glas og flasker. De hele vinflasker rengøres og genbruges af vinhuse, mens glasskårene bliver smeltet om til nyt glas.
Elektronik Orange Genstande der har brugt strøm. Det elektroniske affald bliver typisk kørt til et demonteringsanlæg, hvor det bliver skilt ad, så de forskellige dele kan genanvendes separat.

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).

Eksempel på tabel med zebra striber
Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir, pap eller plastik der ikke kan genanvendes, fordi der er madrester eller andet snask på. Alt det affald, du smider ud i din primære skraldespand, som er dagrenovationen, bliver hentet og kørt på forbrændingen.
Bioaffald og kompost Beige Alt madaffald uden fødevareemballage. Bioaffaldet kommes i bionedbrydelige poser, som bliver komposteret til muld.
Glas Hvid Alle typer glas og flasker. De hele vinflasker rengøres og genbruges af vinhuse, mens glasskårene bliver smeltet om til nyt glas.
Elektronik Orange Genstande der har brugt strøm. Det elektroniske affald bliver typisk kørt til et demonteringsanlæg, hvor det bliver skilt ad, så de forskellige dele kan genanvendes separat.

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.

Eksempel på responsiv tabel
Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir, pap eller plastik der ikke kan genanvendes, fordi der er madrester eller andet snask på. Alt det affald, du smider ud i din primære skraldespand, som er dagrenovationen, bliver hentet og kørt på forbrændingen.
Bioaffald og kompost Beige Alt madaffald uden fødevareemballage. Bioaffaldet kommes i bionedbrydelige poser, som bliver komposteret til muld.
Glas Hvid Alle typer glas og flasker. De hele vinflasker rengøres og genbruges af vinhuse, mens glasskårene bliver smeltet om til nyt glas.
Elektronik Orange Genstande der har brugt strøm. Det elektroniske affald bliver typisk kørt til et demonteringsanlæg, hvor det bliver skilt ad, så de forskellige dele kan genanvendes separat.

Linjehøjde

Eksempler på tabeller med forskellig afstand mellem rækkerne

Normal

Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir. Forbrændingen
Bioaffald og kompost Beige Alt madaffald. Komposteret til muld
Glas Hvid Alle typer glas. Vinhuse og nyt glas
Elektronik Orange Genstande, der har brugt strøm. Demonteringsanlæg

Kompakt

Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir. Forbrændingen
Bioaffald og kompost Beige Alt madaffald. Komposteret til muld
Glas Hvid Alle typer glas. Vinhuse og nyt glas
Elektronik Orange Genstande, der har brugt strøm. Demonteringsanlæg

Ekstra kompakt

Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir. Forbrændingen
Bioaffald og kompost Beige Alt madaffald. Komposteret til muld
Glas Hvid Alle typer glas. Vinhuse og nyt glas
Elektronik Orange Genstande, der har brugt strøm. Demonteringsanlæg

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.

Eksempel på sortering i tabel
Affaldstype Farvekode Beskrivelse Hvor ender det?
Bioaffald og kompost Beige Alt madaffald uden fødevareemballage. Bioaffaldet kommes i bionedbrydelige poser, som bliver komposteret til muld.
Dagrenovation Grøn Madaffald, samt papir, pap eller plastik der ikke kan genanvendes, fordi der er madrester eller andet snask på. Alt det affald, du smider ud i din primære skraldespand, som er dagrenovationen, bliver hentet og kørt på forbrændingen.
Elektronik Orange Genstande der har brugt strøm. Det elektroniske affald bliver typisk kørt til et demonteringsanlæg, hvor det bliver skilt ad, så de forskellige dele kan genanvendes separat.
Glas Hvid Alle typer glas og flasker. De hele vinflasker rengøres og genbruges af vinhuse, mens glasskårene bliver smeltet om til nyt glas.

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

Eksempel på valgbare rækker i en tabel
Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir, pap eller plastik der ikke kan genanvendes, fordi der er madrester eller andet snask på. Alt det affald, du smider ud i din primære skraldespand, som er dagrenovationen, bliver hentet og kørt på forbrændingen.
Bioaffald og kompost Beige Alt madaffald uden fødevareemballage. Bioaffaldet kommes i bionedbrydelige poser, som bliver komposteret til muld.
Glas Hvid Alle typer glas og flasker. De hele vinflasker rengøres og genbruges af vinhuse, mens glasskårene bliver smeltet om til nyt glas.
Elektronik Orange Genstande der har brugt strøm. Det elektroniske affald bliver typisk kørt til et demonteringsanlæg, hvor det bliver skilt ad, så de forskellige dele kan genanvendes separat.

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.

Eksempel på valgbare rækker i en tabel med funktionsknapper
Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir, pap eller plastik der ikke kan genanvendes, fordi der er madrester eller andet snask på. Alt det affald, du smider ud i din primære skraldespand, som er dagrenovationen, bliver hentet og kørt på forbrændingen.
Bioaffald og kompost Beige Alt madaffald uden fødevareemballage. Bioaffaldet kommes i bionedbrydelige poser, som bliver komposteret til muld.
Glas Hvid Alle typer glas og flasker. De hele vinflasker rengøres og genbruges af vinhuse, mens glasskårene bliver smeltet om til nyt glas.
Elektronik Orange Genstande der har brugt strøm. Det elektroniske affald bliver typisk kørt til et demonteringsanlæg, hvor det bliver skilt ad, så de forskellige dele kan genanvendes separat.

Vælg en eller flere rækker for at udføre funktioner

Strukturerede lister

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

Eksempel på struktureret liste
Navn Kirsten Mønster Jensen
Sagsnummer 123.456
Dato 04/05/2011
Beskrivelse Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.
Eksempel på struktureret liste med redigérlink
Navn Kirsten Mønster Jensen Redigér navn
E-mail kirstenjensen@eksempel.dk Redigér e-mail
Telefonnummer 12 34 56 78 Redigér telefonnummer
Se komponenten i eksempelløsninger

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

Eksempel på, hvordan en avanceret tabel med udfoldelige rækker kan se ud

Rediger og slet en række

Eksempel på, hvordan en avanceret tabel med rediger og slet muligheder i en overflowmenu kan se ud