Gå til sidens indhold

Komponenter

Tabeller

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

Retningslinjer

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.

Brugervenlighed

Anvendes til

Tabeller anvendes til at præsentere brugeren for tabulær 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 tabulær 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 udvidelse

Standard

<div class="container">
    <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>
</div>

Uden ramme

<div class="container">
    <div class="table--responsive-scroll">
        <table class="table table--borderless">
            <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>
</div>

Zebralinier

<div class="container">
    <div class="table--responsive-scroll">
        <table class="table table--zebra">
            <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>
</div>

Responsiv

<div class="container">
    <p class="h5">Overflow scroll</p>
    <p>Wrap table in .table--responsive-scroll</p>
    <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>
</div>

<div class="container pt-6">
    <p class="h5">Responsive headers</p>
    <p>Add .table--responsive-headers class to table</p>
    <table class="table table--borderless table--responsive-headers">
        <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>

Forskellig liniehøjde

<div class="container">
    <p class="h5">Normal</p>
    <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.</td>
                    <td>Alt det affald, du smider ud i din. </td>
                </tr>
                <tr>
                    <td>Bioaffald og kompost</td>
                    <td>Beige</td>
                    <td>Alt madaffald.</td>
                    <td>Bioaffaldet kommes i bionedbrydelige.</td>
                </tr>
                <tr>
                    <td>Glas</td>
                    <td>Hvid</td>
                    <td>Alle typer glas.</td>
                    <td>De hele vinflasker.</td>
                </tr>
                <tr>
                    <td>Elektronik</td>
                    <td>Orange</td>
                    <td>Genstande.</td>
                    <td>Det elektroniske affald.</td>
                </tr>
            </tbody>
        </table>
    </div>

    <p class="h5">Klasse: compact</p>
    <div class="table--responsive-scroll">
        <table class="table table--compact">
            <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.</td>
                    <td>Alt det affald, du smider ud i din. </td>
                </tr>
                <tr>
                    <td>Bioaffald og kompost</td>
                    <td>Beige</td>
                    <td>Alt madaffald.</td>
                    <td>Bioaffaldet kommes i bionedbrydelige.</td>
                </tr>
                <tr>
                    <td>Glas</td>
                    <td>Hvid</td>
                    <td>Alle typer glas.</td>
                    <td>De hele vinflasker.</td>
                </tr>
                <tr>
                    <td>Elektronik</td>
                    <td>Orange</td>
                    <td>Genstande.</td>
                    <td>Det elektroniske affald.</td>
                </tr>
            </tbody>
        </table>
    </div>

    <p class="h5">Klasse: extracompact</p>
    <div class="table--responsive-scroll">
        <table class="table table--extracompact">
            <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.</td>
                    <td>Alt det affald, du smider ud i din. </td>
                </tr>
                <tr>
                    <td>Bioaffald og kompost</td>
                    <td>Beige</td>
                    <td>Alt madaffald.</td>
                    <td>Bioaffaldet kommes i bionedbrydelige.</td>
                </tr>
                <tr>
                    <td>Glas</td>
                    <td>Hvid</td>
                    <td>Alle typer glas.</td>
                    <td>De hele vinflasker.</td>
                </tr>
                <tr>
                    <td>Elektronik</td>
                    <td>Orange</td>
                    <td>Genstande.</td>
                    <td>Det elektroniske affald.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Med titel i venstre kolonne

<div class="container">
    <div class="table--responsive-scroll">
        <table class="table table--borderless table--compact">
            <tbody>
                <tr>
                    <th class="w-percent-md-30">Virksomhedens navn</th>
                    <td>Forsikringens forsikring (enhed)</td>
                    <td class="align-text-md-right"><a
                            href="/pages/eksempler/AES-erstatningssag/aes-1">Rediger</a>
                    </td>
                </tr>
                <tr>
                    <th class="w-percent-md-30">Kontaktperson</th>
                    <td>John Doe<br>privatskade@ff.dk<br>+45 1234 5678</td>
                    <td class="align-text-md-right"><a
                            href="/pages/eksempler/AES-erstatningssag/aes-2">Rediger</a>
                    </td>
                </tr>
                <tr>
                    <th class="w-percent-md-30">Afsender er</th>
                    <td>Forsikringens forsikring (enhed)</td>
                    <td class="align-text-md-right"><a
                            href="/pages/eksempler/AES-erstatningssag/aes-1">Rediger</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="table--responsive-scroll mt-7">
        <table class="table table--compact">
            <tbody>
                <tr>
                    <th class="w-percent-md-30">Virksomhedens navn</th>
                    <td>Forsikringens forsikring (enhed)</td>
                    <td class="align-text-md-right"><a
                            href="/pages/eksempler/AES-erstatningssag/aes-1">Rediger</a>
                    </td>
                </tr>
                <tr>
                    <th class="w-percent-md-30">Kontaktperson</th>
                    <td>John Doe<br>privatskade@ff.dk<br>+45 1234 5678</td>
                    <td class="align-text-md-right"><a
                            href="/pages/eksempler/AES-erstatningssag/aes-2">Rediger</a>
                    </td>
                </tr>
                <tr>
                    <th class="w-percent-md-30">Afsender er</th>
                    <td>Forsikringens forsikring (enhed)</td>
                    <td class="align-text-md-right"><a
                            href="/pages/eksempler/AES-erstatningssag/aes-1">Rediger</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="table--responsive-scroll mt-7">
        <table class="table table--zebra table--compact">
            <tbody>
                <tr>
                    <th class="w-percent-md-30">Virksomhedens navn</th>
                    <td>Forsikringens forsikring (enhed)</td>
                    <td class="align-text-md-right"><a
                            href="/pages/eksempler/AES-erstatningssag/aes-1">Rediger</a>
                    </td>
                </tr>
                <tr>
                    <th class="w-percent-md-30">Kontaktperson</th>
                    <td>John Doe<br>privatskade@ff.dk<br>+45 1234 5678</td>
                    <td class="align-text-md-right"><a
                            href="/pages/eksempler/AES-erstatningssag/aes-2">Rediger</a>
                    </td>
                </tr>
                <tr>
                    <th class="w-percent-md-30">Afsender er</th>
                    <td>Forsikringens forsikring (enhed)</td>
                    <td class="align-text-md-right"><a
                            href="/pages/eksempler/AES-erstatningssag/aes-1">Rediger</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>