HTML-guide til udvikling af integrationsløsninger til Borger.dk

Tabeller

Tabeller skal benyttes til at præsentere information, der er velegnet til at blive vist i en matrice - dvs. indhold hvor hver række repræsenterer en enhed med en række attributter, som er repræsenteret som kolonner.

Det er ikke tilladt at benytte tabeller til layoutmæssige formål.

Basistabel

Tabeller skal have klassen table.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table class="table" summary="Resumé af tabellens indhold">
    <caption>Tabellens titel</caption>
    <thead>
        <tr>
            <th scope="col">Kolonneoverskrift</th>
            <th scope="col">Kolonneoverskrift</th>
            <th scope="col">Kolonneoverskrift</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">Række 1 kolonne 1</td>
            <td>Række 1 kolonne 2</td>
            <td>Række 1 kolonne 3</td>
        </tr>
        <tr>
            <td scope="row">Række 2 kolonne 1</td>
            <td>Række 2 kolonne 2</td>
            <td>Række 2 kolonne 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Tabelfod</th>
            <th>Tabelfod</th>
            <th>Tabelfod</th>
        </tr>
    </tfoot>
</table>
Tabellens titel
Kolonneoverskrift Kolonneoverskrift Kolonneoverskrift
Række 1 kolonne 1 Række 1 kolonne 2 Række 1 kolonne 3
Række 2 kolonne 1 Række 2 kolonne 2 Række 2 kolonne 3
Tabelfod Tabelfod Tabelfod

Caption, thead, tbody og tfoot samt attributterne summary og scope er ikke obligatoriske, men bør benyttes ved komplicerede tabeller af tilgængelighedshensyn.

Neutral tabel

Med klassen mono kan laves en tabel med et mere neutralt udseende.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table class="table mono" summary="Resumé af tabellens indhold">
    <caption>Tabellens titel</caption>
    <thead>
        <tr>
            <th scope="col">Kolonneoverskrift</th>
            <th scope="col">Kolonneoverskrift</th>
            <th scope="col">Kolonneoverskrift</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">Række 1 kolonne 1</td>
            <td>Række 1 kolonne 2</td>
            <td>Række 1 kolonne 3</td>
        </tr>
        <tr>
            <td scope="row">Række 2 kolonne 1</td>
            <td>Række 2 kolonne 2</td>
            <td>Række 2 kolonne 3</td>
        </tr>
    </tbody>
</table>
Tabellens titel
Kolonneoverskrift Kolonneoverskrift Kolonneoverskrift
Række 1 kolonne 1 Række 1 kolonne 2 Række 1 kolonne 3
Række 2 kolonne 1 Række 2 kolonne 2 Række 2 kolonne 3

Tabel med kanter (border)

Hvis tabellen skal have kanter forsynes den desuden med klassen table-bordered.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table class="table table-bordered">
    <tr>
        <th>Kolonneoverskrift</th>
        <th>Kolonneoverskrift</th>
        <th>Kolonneoverskrift</th>
    <tr>
    <tr>
        <td>Række 1 kolonne 1</td>
        <td>Række 1 kolonne 2</td>
        <td>Række 1 kolonne 3</td>
    </tr>
    <tr>
        <td>Række 2 kolonne 1</td>
        <td>Række 2 kolonne 2</td>
        <td>Række 2 kolonne 3</td>
    </tr>
</table>
Kolonneoverskrift Kolonneoverskrift Kolonneoverskrift
Række 1 kolonne 1 Række 1 kolonne 2 Række 1 kolonne 3
Række 2 kolonne 1 Række 2 kolonne 2 Række 2 kolonne 3

Tabel med lille skriftstørrelse

Klassen .table-small kan benyttes, hvis der er behov for en mindre skriftstørrelse.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table class="table table-small">
    <tr>
        <th>Kolonneoverskrift</th>
        <th>Kolonneoverskrift</th>
        <th>Kolonneoverskrift</th>
    </tr>
    <tr>
        <td>Række 1 kolonne 1</td>
        <td>Række 1 kolonne 2</td>
        <td>Række 1 kolonne 3</td>
    </tr>
    <tr>
        <td>Række 2 kolonne 1</td>
        <td>Række 2 kolonne 2</td>
        <td>Række 2 kolonne 3</td>
    </tr>
</table>                     
Kolonneoverskrift Kolonneoverskrift Kolonneoverskrift
Række 1 kolonne 1 Række 1 kolonne 2 Række 1 kolonne 3
Række 2 kolonne 1 Række 2 kolonne 2 Række 2 kolonne 3

Tabel med skiftende rækker

Klassen alternate kan benyttes på rækker, så hver anden række får en anden farve.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table class="table">
    <tr>
        <th>Kolonneoverskrift</th>
        <th>Kolonneoverskrift</th>
        <th>Kolonneoverskrift</th>
    </tr>
    <tr class="alternate">
        <td>Række 1 kolonne 1</td>
        <td>Række 1 kolonne 2</td>
        <td>Række 1 kolonne 3</td>
    </tr>
    <tr>
        <td>Række 2 kolonne 1</td>
        <td>Række 2 kolonne 2</td>
        <td>Række 2 kolonne 3</td>
    </tr>
    <tr class="alternate">
        <td>Række 1 kolonne 1</td>
        <td>Række 1 kolonne 2</td>
        <td>Række 1 kolonne 3</td>
    </tr>
</table>                         
Kolonneoverskrift Kolonneoverskrift Kolonneoverskrift
Række 1 kolonne 1 Række 1 kolonne 2 Række 1 kolonne 3
Række 2 kolonne 1 Række 2 kolonne 2 Række 2 kolonne 3
Række 1 kolonne 1 Række 1 kolonne 2 Række 1 kolonne 3

Responsive tabeller

Tabeller med mange og/eller brede kolonner kan være vanskelige at vise på små skærme. Nedenstående viser en række teknikker, der kan benyttes sammen med HTML-guiden. Hvilken teknik, der er mest hensigtsmæssig, kommer an på den specifikke situation og hvilke data, der skal vises.

Overflow

Overflow er en simpel måde at håndtere tabeller på små skærme. Overflow kræver en div, der omslutter selve tabellen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="table-responsive">
    <table class="table">
        <tr>
            <th>Kolonneoverskrift</th>
            <th>Kolonneoverskrift</th>
            <th>Kolonneoverskrift</th>
        </tr>
        <tr>
            <td>Række 1 kolonne 1</td>
            <td>Række 1 kolonne 2</td>
            <td>Række 1 kolonne 3</td>
        </tr>
        <tr>
            <td>Række 2 kolonne 1</td>
            <td>Række 2 kolonne 2</td>
            <td>Række 2 kolonne 3</td>
        </tr>
        <tr>
            <td>Række 1 kolonne 1</td>
            <td>Række 1 kolonne 2</td>
            <td>Række 1 kolonne 3</td>
        </tr>
    </table>
</div>   
Kolonneoverskrift Kolonneoverskrift Kolonneoverskrift
Række 1 kolonne 1 Række 1 kolonne 2 Række 1 kolonne 3
Række 2 kolonne 1 Række 2 kolonne 2 Række 2 kolonne 3
Række 1 kolonne 1 Række 1 kolonne 2 Række 1 kolonne 3

Tvungen orddeling

Med klassen wordbreak kan man sikre, at lange ord deles, hvilket muliggør, at tabellens kolonner kan blive meget smalle. Man skal dog være opmærksom på, at orddelingen ikke nødvendigvis sker ved stavelser.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table class="table wordbreak">
    <tr>
        <th>MegetLangKolonneoverskrift</th>
        <th>MegetLangKolonneoverskrift</th>
        <th>MegetLangKolonneoverskrift</th>
    </tr>
    <tr class="alternate">
        <td>Række 1 kolonne 1</td>
        <td>Række 1 kolonne 2</td>
        <td>Række 1 kolonne 3</td>
    </tr>
    <tr>
        <td>Række 2 kolonne 1</td>
        <td>Række 2 kolonne 2</td>
        <td>Række 2 kolonne 3</td>
    </tr>
    <tr class="alternate">
        <td>Række 1 kolonne 1</td>
        <td>Række 1 kolonne 2</td>
        <td>Række 1 kolonne 3</td>
    </tr>
</table>
MegetLangKolonneoverskrift MegetLangKolonneoverskrift MegetLangKolonneoverskrift
Række 1 kolonne 1 Række 1 kolonne 2 Række 1 kolonne 3
Række 2 kolonne 1 Række 2 kolonne 2 Række 2 kolonne 3
Række 1 kolonne 1 Række 1 kolonne 2 Række 1 kolonne 3

Lineariserede tabeller

Når man lineariserer en tabel på små skærme ændrer man tabellens udseende, således hver række fremstår separat.

CSS:

?
1
2
3
4
5
@media (max-width: 767px) {
    .table-linear td:nth-of-type(1):before { content: "Navn"; }
    .table-linear td:nth-of-type(2):before { content: "Alder"; }
    .table-linear td:nth-of-type(3):before { content: "Køn"; }
}

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="clearfix">
    <table class="table table-linear">
        <caption>Personer</caption>
        <thead>
            <tr>
                <th>Navn</td>
                <th>Alder</td>
                <th>Køn</td>
            <tr>
        </thead>
        <tbody>
            <tr>
                <td>Hans Mortensen</td>
                <td>51</td>
                <td>Mand</td>
            </tr>
            <tr>
                <td>Agnes Hattemager</td>
                <td>85</td>
                <td>Kvinde</td>
            </tr>
        </tbody>
    </table>
</div>
Personer
Navn Alder Køn
Hans Mortensen 51 Mand
Agnes Hattemager 85 Kvinde

Frys kolonne

Visse typer tabeller læses ikke rækkevis men kolonnevis. Det gælder eksempelvis skoleskemaer. Her giver det ofte god mening at fryse en kolonne med nøgledata. Man skal dog være opmærksom på, at denne metode kan være behæftet med problemer, når der bruges integrationsformen iframe. Ligeledes kan der være problemer med ældre mobilbrowsere, hvorfor metoden bør suppleres med javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="table-freeze">
    <table class="table">
        <tr>
            <th>Tid</th>
            <th>Mandag</th>
            <th>Tirsdag</th>
            <th>Onsdag</th>
            <th>Torsdag</th>
            <th>Fredag</th>
        </tr>
        <tr>
            <td>8-9</td>
            <td>Dansk</td>
            <td>Idræt</td>
            <td>Dansk</td>
            <td></td>
            <td>Matematik</td>
        </tr>
        [....]
        <tr>
            <td>15-16</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>
Tid Mandag Tirsdag Onsdag Torsdag Fredag
8-9 Dansk Idræt Dansk Matematik
9-10 Dansk Idræt Kristendom Historie Dansk
10-11 Kristendom Musik Engelsk Dansk Geografi
11-12 Billedkunst Matematik Engelsk Matematik Kristendom
12-13 Billedkunst Matematik Matematik Dansk Klassens time
13-14       Kor  
14-15          
15-16          

Skjul mindre væsentlige kolonner

For at spare plads kan man skjule mindre vigtige kolonner på små skærme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table class="table table-bordered">
    <tr>
        <th class="hidden-phone">ID</th>
        <th>Titel</th>
        <th>År</th>
    </tr>
    <tr>
        <td class="hidden-phone">1</td>
        <td>Rundetårn</td>
        <td>2012</td>
    </tr>
    <tr>
        <td class="hidden-phone">2</td>
        <td>Limfjordtunnellen</td>
        <td>1977</td>
    </tr>
</table>
ID Titel År
1 Rundetårn 2012
2 Limfjordtunnellen 1977