Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
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.
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.
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)
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
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).
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.
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
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.
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”.
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
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.
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.
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.
Se komponenten i eksempelløsninger
- Formular til kontaktoplysninger: Bekræft oplysninger
- Trinformular til registrering: Kvittering
- Sagsoversigt: Sagsnr. 123456789
Struktureret liste med link
Navn | Kirsten Mønster Jensen | Redigér navn |
---|---|---|
kirstenjensen@eksempel.dk | Redigér e-mail | |
Telefonnummer | 12 34 56 78 | Redigér telefonnummer |
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
