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.

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

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

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

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

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

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

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

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

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

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

<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