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 og viser data i kolonner og rækker.

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.

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</a>. Anvend da i stedet strukturerede lister.

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.

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

Referencer

Se komponenten i eksempelløsninger

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

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

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.

Bemærk, at mens horisontal scroll generelt set giver en dårlig brugeroplevelse på desktop, så kan det i nogle tilfælde være en bedre løsning på mobil at lade lange tabeller scrolle horisontalt 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.

Forskellig linjehøjde

Normal

Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir. Alt det affald, du smider ud i din.
Bioaffald og kompost Beige Alt madaffald. Bioaffaldet kommes i bionedbrydelige.
Glas Hvid Alle typer glas. De hele vinflasker.
Elektronik Orange Genstande. Det elektroniske affald.

Klasse: compact

Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir. Alt det affald, du smider ud i din.
Bioaffald og kompost Beige Alt madaffald. Bioaffaldet kommes i bionedbrydelige.
Glas Hvid Alle typer glas. De hele vinflasker.
Elektronik Orange Genstande. Det elektroniske affald.

Klasse: extracompact

Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir. Alt det affald, du smider ud i din.
Bioaffald og kompost Beige Alt madaffald. Bioaffaldet kommes i bionedbrydelige.
Glas Hvid Alle typer glas. De hele vinflasker.
Elektronik Orange Genstande. Det elektroniske affald.

Sortering i tabeller

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.

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

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 i tabellen” eller ved tasten “Enter”.

Valgbare rækker

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

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

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 under knapperne, hvis de bliver klikket, før der er valgt en eller flere rækker.

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.

Eksempel på, hvordan en avanceret tabel kan se ud

Udfoldelig række

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

Rediger og slet en række

Funktionslink i overflow menu, som åbner en modal

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

Knapper med ikon, som åbner en modal

Eksempel på, hvordan en avanceret tabel med slet knap kan se ud