Tabeller

Sådan bruges komponenten

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 (W3C, WCAG 2.1, SC 1.3.1).

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

Varianter

Uden ramme

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

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.

Linjehøjde

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.

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

Valgbare rækker

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.

Tabel med paginering

Tilføj paginering til tabeller, hvor der potentielt kan være mange rækker.

Giv brugeren mulighed for at se flere rækker per side. Hvis det er teknisk muligt mht. tabellens størrelse, så tilbyd brugeren at se alle rækker på én gang (Nielsen, 2013).

Hvis tabellen indeholder både paginering og sortering, skal klik på en sorteringskolonne sortere alle rækker på tværs af siderne i tabellen og aldrig kun rækkerne på den aktuelle side. Ved ændring i sortering og efter søgning i tabellen skal brugeren tages tilbage til side 1.

Strukturerede lister

Strukturerede lister opstiller simple informationer på en letlæselig måde.

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.

Eksempel på struktureret liste med link

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
• Formular til kontaktoplysninger: Bekræft oplysninger
• Trinformular til registrering: Kvittering
• Sagsoversigt: Sagsnr. 123456789

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 (WCAG 2.1): Technique F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers
• Jakob Nielsen: Users' Pagination Preferences and “View All” (2013)

Installation

HTML Struktur

<div class="table--responsive-scroll" tabindex="0">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Affaldstype</th>
                <th scope="col">Farvekode</th>
                <th scope="col">Beskrivelse</th>
                <th scope="col">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ælpeklassen for bredde i procent til at definere bredde på kolonner.

Brug klassen table-header-no-wrap på th-elementet inde i thead, hvis du ikke ønsker, at en header skal kunne ombrydes til flere linjer.

Brug klasserne vertical-align-top, vertical-align-middle og vertical-align-bottom på enten <th> eller <td> til at ændre den vertikale placering af indholdet i en celle i toppen, midten eller bunden.

Horisontalt scroll

Tabeller er som udgangspunkt sat ind i en <div>, der har klassen table--responsive-scroll, hvilket gør at tabellen kan scrolles vandret, hvis den bliver for smal. Hvis man ikke ønsker, at dette skal være muligt, kan man undlade denne <div>.

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

En tabel gøres responsiv ved at tilføje klassen table--responsive-headers til <table>. Responsive tabeller ændrer som standard udseende ved breakpoint sm, men hvis du har mange kolonner i din tabel, kan det give mening at anvende et andet breakpoint.

Hvis din tabel indeholder værdier, der kræver mere end ca. 290 pixels i bredden for at blive vist, bør du undlade at gøre den responsiv og i stedet anvende horisontalt scroll - tjek eventuelt om din responsive tabel kan vises pænt, når skærmstørrelsen er 320 pixels i bredden, uden at indholdet ryger ud over kanten.

Du kan anvende en af nedenstående klasser for at ændre, ved hvilket breakpoint tabellens udseende skal ændres:

• table-sm-responsive-headers (svarer til table--responsive-headers)
• table-md-responsive-headers
• table-lg-responsive-headers

Udover at tilføje en klasse, skal attributten data-title tilføjes til hver <td>, hvilket gør at en label bliver tilføjet for hver celle på mindre skærme.

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

Attributten kan sættes automatisk ved brug af JavaScript.

Bemærk, at tabeller med sortering og tabeller med valgbare rækker ikke har en responsiv version.

JavaScript for responsive tabeller

Anvendes til at 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'));

Linjehøjde

Kompakt

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

Ekstra kompakt

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

Sortering i tabeller

Se nedenstående eksempels HTML for, hvilke klasser, attributter og knapper, der skal sættes på hhv. <th> og <tbody>.

Der følger ikke JavaScript med til sortering i tabeller og man skal derfor selv håndtere funktionaliteten. Nedenstående eksempel er dog gjort funktionelt som demonstration.

<div class="table--responsive-scroll" tabindex="0">
    <table class="table" id="sortingTable">
        <thead>
            <tr>
                <th scope="col" class="table-header-no-wrap" aria-sort="ascending"><button
                        class="button button-unstyled" id="btn-sort-by-affaldstype"
                        type="button">Affaldstype<span class="sr-only"> Klik for at sortere
                            faldende</span>
                        <svg class="icon-svg mr-0 ml-2" focusable="false" aria-hidden="true"><use xlink:href="#sort-table-ascending"></use></svg>
                    </button></th>
                <th scope="col" class="table-header-no-wrap"><button
                        class="button button-unstyled" id="btn-sort-by-farvekode"
                        type="button">Farvekode<span class="sr-only"> Klik for at sortere
                            efter denne kolonne</span>
                        <svg class="icon-svg mr-0 ml-2" focusable="false" aria-hidden="true"><use xlink:href="#sort-table-none"></use></svg>
                    </button></th>
                <th scope="col">Beskrivelse</th>
                <th scope="col">Hvor ender det?</th>
            </tr>
        </thead>
        <tbody aria-live="polite">
            <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>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>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>
            <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>
        </tbody>
    </table>
</div>

Søgning i tabeller

Anvend søgefeltkomponenten sammen med din tabel og tilføj aria-live="polite" til <table>.

Der følger ikke JavaScript med til søgning i tabeller og man skal derfor selv håndtere funktionaliteten. Nedenstående eksempel er dog gjort funktionelt som demonstration.

<form novalidate method="get" id="formSearchTable">
    <div class="form-group search">
        <label for="inputSearchTable" class="sr-only">Søg efter indhold</label>
        <input class="form-input input-char-27" id="inputSearchTable" name="searchtable"
            type="search">
        <button class="button button-search" id="btnSearchTable" type="submit">
            Søg
        </button>
    </div>
</form>

<div class="table--responsive-scroll mt-4" tabindex="0">
    <table class="table" id="searchTable" aria-live="polite">
        <thead>
            <tr>
                <th scope="col">Affaldstype</th>
                <th scope="col">Farvekode</th>
                <th scope="col">Beskrivelse</th>
                <th scope="col">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>

Valgbare rækker

<div class="table--responsive-scroll" tabindex="0">
    <table class="table table--selectable" id="selectable-table1">
        <thead>
            <tr>
                <th>
                    <div class="form-group-checkbox">
                        <input id="selectable-table1-check-all" type="checkbox"
                            class="form-checkbox"
                            aria-controls=" selectable-table1-check-1 selectable-table1-check-2 selectable-table1-check-3 selectable-table1-check-4">
                        <label for="selectable-table1-check-all"><span class="sr-only">Vælg
                                alle rækker</span></label>
                    </div>
                </th>
                <th scope="col">Affaldstype</th>
                <th scope="col">Farvekode</th>
                <th scope="col">Beskrivelse</th>
                <th scope="col">Hvor ender det?</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="form-group-checkbox">
                        <input id="selectable-table1-check-1" type="checkbox"
                            name="selectable-table1-check[]" class="form-checkbox"
                            value="Dagrenovation">
                        <label for="selectable-table1-check-1"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <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>
                    <div class="form-group-checkbox">
                        <input id="selectable-table1-check-2" type="checkbox"
                            name="selectable-table1-check[]" class="form-checkbox"
                            value="Bioaffald og kompost">
                        <label for="selectable-table1-check-2"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <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>
                    <div class="form-group-checkbox">
                        <input id="selectable-table1-check-3" type="checkbox"
                            name="selectable-table1-check[]" class="form-checkbox"
                            value="Glas">
                        <label for="selectable-table1-check-3"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <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>
                    <div class="form-group-checkbox">
                        <input id="selectable-table1-check-4" type="checkbox"
                            name="selectable-table1-check[]" class="form-checkbox"
                            value="Elektronik">
                        <label for="selectable-table1-check-4"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <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 class="table-actions">
    <p class="table-selected-number no-selected mb-0">Ingen rækker valgt</p>
</div>

Valgbare rækker med funktionsknapper

<div class="table--responsive-scroll" tabindex="0">
    <table class="table table--selectable" id="selectable-table2">
        <thead>
            <tr>
                <th>
                    <div class="form-group-checkbox">
                        <input id="selectable-table2-check-all" type="checkbox"
                            class="form-checkbox"
                            aria-controls=" selectable-table2-check-1 selectable-table2-check-2 selectable-table2-check-3 selectable-table2-check-4">
                        <label for="selectable-table2-check-all"><span class="sr-only">Vælg
                                alle rækker</span></label>
                    </div>
                </th>
                <th scope="col">Affaldstype</th>
                <th scope="col">Farvekode</th>
                <th scope="col">Beskrivelse</th>
                <th scope="col">Hvor ender det?</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="form-group-checkbox">
                        <input id="selectable-table2-check-1" type="checkbox"
                            name="selectable-table2-check[]" class="form-checkbox"
                            value="Dagrenovation">
                        <label for="selectable-table2-check-1"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <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>
                    <div class="form-group-checkbox">
                        <input id="selectable-table2-check-2" type="checkbox"
                            name="selectable-table2-check[]" class="form-checkbox"
                            value="Bioaffald og kompost">
                        <label for="selectable-table2-check-2"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <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>
                    <div class="form-group-checkbox">
                        <input id="selectable-table2-check-3" type="checkbox"
                            name="selectable-table2-check[]" class="form-checkbox"
                            value="Glas">
                        <label for="selectable-table2-check-3"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <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>
                    <div class="form-group-checkbox">
                        <input id="selectable-table2-check-4" type="checkbox"
                            name="selectable-table2-check[]" class="form-checkbox"
                            value="Elektronik">
                        <label for="selectable-table2-check-4"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <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 class="table-actions">
    <p class="table-selected-number no-selected">Ingen rækker valgt</p>
    <button class="button button-primary">
        <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#file-download"></use></svg>
        Download
    </button><button class="button button-secondary">
        <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#content-copy"></use></svg>
        Duplikér
    </button><button class="button button-secondary">
        <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#trash-can"></use></svg>
        Slet
    </button>
</div>

JavaScript for tabeller med valgbare rækker

Tabel med valgbare rækker kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

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

Bemærk, at for valgbare rækker med funktionsknapper skal man selv håndtere funktionaliteten for, hvilke meddelelser der vises under tabellen, for eksempel antal rækker valgt. Tabeleksemplerne på denne side er gjort funktionelle for bedre demonstrationen af valgbare rækker.

Events

Tabel med paginering

<p aria-live="polite" aria-atomic="true" class="rows-message" id="table-pagination-message">
    Viser <strong class="displayed-rows">1-10</strong> af
    <strong class="total-rows">90</strong> rækker</p>
<div class="table--responsive-scroll" tabindex="0">
    <table class="table table--selectable" id="table-pagination">
        <thead>
            <tr>
                <th>
                    <div class="form-group-checkbox">
                        <input id="table-pagination-check-all" type="checkbox"
                            class="form-checkbox"
                            aria-controls=" table-pagination-check-1 table-pagination-check-2 table-pagination-check-3">
                        <label for="table-pagination-check-all"><span class="sr-only">Vælg
                                alle rækker</span></label>
                    </div>
                </th>
                <th scope="col">Farve</th>
                <th scope="col">ID</th>
                <th scope="col">Beskrivelse</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="form-group-checkbox">
                        <input id="table-pagination-check-1" type="checkbox"
                            name="table-pagination-check[]" class="form-checkbox"
                            value="Grøn">
                        <label for="table-pagination-check-1"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <td>Grøn</td>
                <td>ASDF</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
            <tr>
                <td>
                    <div class="form-group-checkbox">
                        <input id="table-pagination-check-2" type="checkbox"
                            name="table-pagination-check[]" class="form-checkbox" value="Blå">
                        <label for="table-pagination-check-2"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <td>Blå</td>
                <td>GHJK</td>
                <td>Cras pellentesque sapien eu ante consequat pellentesque.</td>
            </tr>
            <tr>
                <td>
                    <div class="form-group-checkbox">
                        <input id="table-pagination-check-3" type="checkbox"
                            name="table-pagination-check[]" class="form-checkbox" value="Rød">
                        <label for="table-pagination-check-3"><span class="sr-only">Vælg
                                række</span></label>
                    </div>
                </td>
                <td>Rød</td>
                <td>YUIO</td>
                <td>Curabitur vel augue et felis aliquam dictum at a risus.</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="table-pagination-options">

    <div class="form-group">
        <label class="form-label" for="pagination-pages">Vis rækker per side:</label>

        <select class="form-select" name="pagination-pages" id="pagination-pages">
            <option value="10">10</option>
            <option value="30">30</option>
            <option value="all">Alle</option>
        </select>
    </div>

    <div role="group" class="table-pagination" aria-label="Skift side i tabellen">
        <button
            class="button button-arrow button-first hidden"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#first-page"></use></svg><span
                class="sr-only">Første side</span></button>
        <button class="button button-arrow button-previous hidden" aria-label="Forrige side">
            <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#chevron-left"></use></svg><span
                class="pagination-nav-link">Forrige</span>
        </button>
        <span class="pagination-mobile">Side 1 af 9</span>
        <ul class="pagination__items">

            <li class="pagination-item pagination-number">
                <button class="button current-page" aria-label='Side 1'
                    aria-current="true">1</button>
            </li>

            <li class="pagination-item pagination-number">
                <button class="button button-secondary" aria-label='Side 2'>2</button>
            </li>

            <li class="pagination-item pagination-number">
                <button class="button button-secondary" aria-label='Side 3'>3</button>
            </li>

            <li class="pagination-item pagination-number">
                <button class="button button-secondary" aria-label='Side 4'>4</button>
            </li>

            <li class="pagination-item pagination-number">
                <button class="button button-secondary" aria-label='Side 5'>5</button>
            </li>

            <li class="pagination-item pagination-overflow">
                <span class="sr-only">Prikker som indikerer skjulte
                    sider</span><span>...</span>
            </li>
            <li class="pagination-item pagination-number">
                <button class="button button-secondary"
                    aria-label='Sidste side, side 9'>9</button>
            </li>
        </ul>
        <button class="button button-arrow button-next" aria-label="Næste side">
            <span
                class="pagination-nav-link">Næste</span><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#chevron-right"></use></svg>
        </button>
        <button
            class="button button-arrow button-last"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#last-page"></use></svg><span
                class="sr-only">Sidste side</span></button>
    </div>

</div>
<div class="table-actions">
    <p class="table-selected-number no-selected mb-0">Ingen rækker valgt</p>
</div>

Der medfølger ikke JavaScript med denne variant. Man skal derfor selv implementere sideskift i tabellen og opdatere beskeden om antal valgte rækker, såfremt disse er valgbare.

Beskeden i rows-message skal opdateres, når der skiftes side. Vær dog opmærksom på ikke at trigge beskedens aria-live, før brugeren selv trykker på en af pagineringsknapperne.

Når brugeren skifter side, er der risiko for, at tabellens længde skifter. Hvis pagineringsknapperne ikke er synlige efter sideskift, så sørg for at scrolle siden programmatisk, så knapperne bliver synlige igen.

Strukturerede lister

<div class="table--responsive-scroll">
    <table class="table structured-list table-sm-responsive-headers">
        <tbody>
            <tr>
                <th scope="row" class="w-percent-md-30">Navn</th>
                <td>Kirsten Mønster Jensen</td>
            </tr>
            <tr>
                <th scope="row" class="w-percent-md-30">Sagsnummer</th>
                <td>123.456</td>
            </tr>
            <tr>
                <th scope="row" class="w-percent-md-30">Dato</th>
                <td>04/05/2011</td>
            </tr>
            <tr>
                <th scope="row" class="w-percent-md-30">Beskrivelse</th>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. </td>
            </tr>
        </tbody>
    </table>
</div>

Strukturerede lister kan bruges i forbindelse med opsummering eller kvitteringssider som en alternativ tabel, hvor der ikke er nogen vandrette headers.

Listerne skal altid indeholde præcis 2 eller 3 kolonner. Første kolonne anvendes til headers/titel, anden kolonne til indhold/information og tredje kolonne til eventuel redigering af rækkens indhold. Husk at markere scope="row" for hver tabelheader.

Listen kan gøres responsiv ved at tilføje klassen med det ønskede breakpoint. Se responsive klasser for tabeller.

Struktureret liste med redigér

<div class="table--responsive-scroll">
    <table class="table structured-list table-sm-responsive-headers">
        <tbody>
            <tr>
                <th scope="row">Navn</th>
                <td>Kirsten Mønster Jensen</td>
                <td class="d-print-none align-text-md-right"><a href="#">Redigér<span
                            class="sr-only"> navn</span></a></td>
            </tr>
            <tr>
                <th scope="row">E-mail</th>
                <td>kirstenjensen@eksempel.dk</td>
                <td class="d-print-none align-text-md-right"><a href="#">Redigér<span
                            class="sr-only"> e-mail</span></a></td>
            </tr>
            <tr>
                <th scope="row">Telefonnummer</th>
                <td>12 34 56 78</td>
                <td class="d-print-none align-text-md-right"><a href="#">Redigér<span
                            class="sr-only"> telefonnummer</span></a></td>
            </tr>
        </tbody>
    </table>
</div>