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:

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:

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:

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:

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

Fortæl os hvad du tænker: