Gå til sidens indhold

Vælg et tema

Luk

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

Tabeller anvendes ikke til at opsætte en sides eller en komponents indhold udover data.

Overvej at anvende en liste (en unordered eller definition list), hvis det giver brugeren et bedre overblik.

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.

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

Lisa Charlotte Rost: What to consider when creating tables (2019)

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.

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.

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.

Med titel i venstre kolonne

Virksomhedens navn Forsikringens forsikring (enhed) Rediger
Kontaktperson John Doe
privatskade@ff.dk
+45 1234 5678
Rediger
Afsender er Forsikringens forsikring (enhed) Rediger
Virksomhedens navn Forsikringens forsikring (enhed) Rediger
Kontaktperson John Doe
privatskade@ff.dk
+45 1234 5678
Rediger
Afsender er Forsikringens forsikring (enhed) Rediger
Virksomhedens navn Forsikringens forsikring (enhed) Rediger
Kontaktperson John Doe
privatskade@ff.dk
+45 1234 5678
Rediger
Afsender er Forsikringens forsikring (enhed) Rediger

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

Valgbar række

Eksempel på, hvordan en avanceret tabel med valgbar 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