Kode

Tabeller

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.

Eksempler og retningslinjer

Installation

HTML Struktur

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

Man kan gøre brug af hjælpeklasser til at definere bredde på kolonner.

Tilgængelighed

Tabeller i Det Fælles Designsystem overholder HTML standarden, men du skal selv tilføje scope=col eller scope=row til hver header celle th

Hvis du konstruerer en såkaldt kompleks tabel – en tabel med flere header-niveauer - skal hver header have tilføjet et unikt id (fx id=header-eksempel) og hver celle tilføjes en header-attribut med den relevante og tilknyttede tabel header’s id angivet (fx header=header-eksempel).

Når du tilføjer en titel til en tabel, skal du skrive den i caption indenfor table-elementet.

Javascript

Man kan sætte de korrekte attributter automatisk, hvis man ønsker en responsiv tabel. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.ResponsiveTable(document.getElementById('TABLE-ID'));

Varianter

Uden ramme

For at fjerne den yderste ramme tilføj klassen table--borderless til <table>.

Zebralinjer

Man kan sætte zebralinjer på en tabel med klassen table--zebra på <table>.

Responsiv tabel

Tilføj en af nedenstående klasser:

table-sm-responsive-headers
table-md-responsive-headers
table-lg-responsive-headers

Indsæt den klasse der passer til mængden af kolonner i din tabel. Klasserne ændrer tabellens udseende i forskellige breakpoints.

Attributten data-title bør tilføjes til hver <td>, således at en label bliver tilføjet for hver celle på mindre skærme.

Attributten kan sættes automatisk ved brug af JavaScript.

<tr>
    <td data-title="Affaldstype">Bioaffald og kompost</td>
    <td data-title="Farvekode">Beige</td>
    <td data-title="Beskrivelse">Alt madaffald uden fødevareemballage.</td>
    <td data-title="Hvor ender det?">Bioaffaldet kommes i bionedbrydelige poser, som bliver komposteret til muld.</td>
</tr>

Scroll på tabel

En tabel er som udgangspunkt ikke responsiv, men man kan gøre den responsiv til en vis grad ved at tilføje vandret scroll.

Sæt <table> elementet i en <div>, som har klassen table--responsive-scroll.

Linjehøjde

Kompakt

Tilføj klassen table--compact på <table>

Ekstra kompakt

Tilføj klassen table--extracompact på <table>