Ved at bruge denne side acceptere du brugen af cookies.

Læs mere

Del via:

Tabeller i HTML

Tabeller anvendes primært til tabulært indhold. Det vil sige, data som høre hjemme i en tabel, og det kunne eksempelvis være en liste over navne.

Redigeret: 2017-07-14 08:53

Tabeller bliver brugt til tabulært data, det vil sige, data som passer ind i en tabel. I gamle dage brugte man også tabeller til layout, men det er man gået væk fra i nyere tid. Tabeller har dog stadig deres helt eget anvendelsesområder, og takket være CSS har det aldrig været nemmere at styre deres udsende.

I HTML benytter vi forskellige elementer, som tilsammen vil danne en tabel. Det første element er table, det udgør selve tabellen. For at oprette henholdsvis rækker og kolonner bruger man tr og td, hvoraf sidstnævnte bliver brugt til at lave "celler" i hver række. Det er vigtigt, at man har samme antal celler i alle rækker.

HTML Tabeller

En simpel HTML tabel kunne eksempelvis indeholde en liste med personer, bestående af navne, alder og e-mail. HTML koden til tabellen vil se sådan her ud:

<table>
 <tr><td>John</td><td>23</td><td>john@example.com</td></tr>
 <tr><td>Jonas</td><td>24</td><td>jonas@example.com</td></tr>
 <tr><td>Kamilla</td><td>23</td><td>kamilla@example.com</td></tr>
</table>

Resultat:

John 23 john@example.com
Jonas 24 jonas@example.com
Kamilla 23 kamilla@example.com

Overskrifter på kolonner

Man kan også lave overskrifter på de enkelte kolonner i en tabel. Igen er det vigtigt, at man husker at lave lige mange celler i hver række (tr). Når man laver overskrifter i sine tabeller, skal man bruge th elementet i stedet for tr. En tabel med overskrifter kan laves på følgende måde:

<table>
 <tr><th>Navn</th><th>Alder</th><th>E-mail</th></tr>
 <tr><td>John</td><td>23</td><td>john@example.com</td></tr>
 <tr><td>Jonas</td><td>24</td><td>jonas@example.com</td></tr>
 <tr><td>Kamilla</td><td>23</td><td>kamilla@example.com</td></tr>
</table>

Resultat:

NavnAlderE-mail
John23john@example.com
Jonas24jonas@example.com
Kamilla23kamilla@example.com

Skift udseende på dine tabeller med CSS

Udseende på HTML tabeller kan styres med enkelte CSS egenskaber, hvilket gør det nemt at give tabellerne et bedre design. De specifikke tabel-egenskaber vi bruger er primært border-collapse, border-spacing og empty-cells. Derudover kan vi også bruge alle de øvrige CSS egenskaber, som margin, padding og border. Bare for at nævne nogle stykker.

Border-collapse styre om kanterne på cellerne skal kollapse. Dvs. Om der skal være mellemrum imellem cellernes kanter, eller om der kun skal være én kant til at adskille cellerne i en tabel.

Border-spacing bruges til at angive afstanden imellem cellerne i en tabel.

Empty-cells bliver brugt til at vise eller skjule tomme celler i en tabel.

Det er meget almindeligt, at vi ønsker et design, hvor der ikke er mellemrum imellem cellerne. Derfor skal vi bruge border-collapse til at fjerne alt mellemrum. Det er ikke nok at sætte border-spacing til 0, da kanten så bare vil blive lagt sammen. Dvs. En 1px kant bliver til 2px. Koden vist nedenfor burde være nok i se fleste tilfælde:

table {border-collapse:collapse;}
table,td,th {border:1px solid black;}

Vi kan angive en kant for både td og th i samme hug, ved at adskille selektorene med komma, som vi også har gjort i eksemplet ovenfor.

Faktisk skal der ikke mere til at designe flotte tabeller. Resultatet kan ses nedenfor:

NavnAlderE-mail
John23john@example.com
Jonas24jonas@example.com
Kamilla23kamilla@example.com

Selvfølgelig er ovenstående eksempel ikke super flot, fordi indholdet er for tæt på kanterne. For at forbedre designet, kan vi tilføje en padding til cellerne og give tabellen en bredde eller minimums-bredde, det kan vi med width eller min-width. Typisk vil man angive en minimumsbredde i pixels, men det afhænger helt af situationen. Er man meget cross-platform bevidst, så skal man enten bruge procent eller media queries til bedre at styre, hvad der sker i forskellige skærm størrelser.

Når man angiver padding, er det normalt bedst at bruge em. Vi vil derfor angive en padding på 0.5em på td og th, for at skabe lidt mellemrum, og få det hele til at se lidt pænere ud.

table {border-collapse:collapse;width:80%;}
td,th {border:1px solid black;padding:0.5em;}

Resultat:

NavnAlderE-mail
John23john@example.com
Jonas24jonas@example.com
Kamilla23kamilla@example.com

Vi kan også skifte farven på kanterne, men hvordan man kan gøre det, burde være indlysende nu.