Brug tabeller - bare ikke til design

I tiden før CSS blev tabeller brugt flittigt til at layoute indholdet på en hjemmeside. Da CSS vandt indpas, blev tabeller pludselig udsat for en heksejagt og blev udråbt til fandens værk. Det er nu ikke så slemt. Tabeller udfyldte blot en rolle i mangel på bedre værkstøjer og blev anvendt ekstremt kreativt, men med CSS kan man lave layout endnu bedre, så der er ingen grund til at bruge tabeller til layout.

Derimod er tabeller fremragende til at præsentere tabulære data, og det bør de stadig bruges til. Men man kan gøre meget, for at øge brugervenligheden, læsevenligheden og æstetikken i sin tabel, og det vil jeg forsøge at præsentere for dig her.

Lad os starte med den mest simple tabel (har lige givet den grå baggrund for at du kan se den):

Land	Hovedstad	Indbyggere	Areal	Styreform
Etiopien	Addis Ababa	75.067.000	1.104.300 km2	Føderal republik
Danmark	København	5.457.415	43.094 km2	Monarki
Marokko	Rabat	33.757.175	446.550 km2	Monarki
Indien	New Delhi	1,2 mia.	3.287.590 km2	Føderal republik

Ikke specielt kønt, vel? Man kan selvfølgelig gøre den lidt mere overskuelig ved at give den en ramme, og så ser den sådan her ud:

Land	Hovedstad	Indbyggere	Areal	Styreform
Etiopien	Addis Ababa	75.067.000	1.104.300 km2	Føderal republik
Danmark	København	5.457.415	43.094 km2	Monarki
Marokko	Rabat	33.757.175	446.550 km2	Monarki
Indien	New Delhi	1,2 mia.	3.287.590 km2	Føderal republik

Det første man bør gøre er at markere, hvad der er overskrifter, og det gør man med <th>-tagget (th = table header - altså overskrift), så vores tabel starter således:


Nu ser vores tabel således ud - jeg har i CSS givet th en lidt mørkere baggrund:

Land	Hovedstad	Indbyggere	Areal	Styreform
Etiopien	Addis Ababa	75.067.000	1.104.300 km2	Føderal republik
Danmark	København	5.457.415	43.094 km2	Monarki
Marokko	Rabat	33.757.175	446.550 km2	Monarki
Indien	New Delhi	1,2 mia.	3.287.590 km2	Føderal republik

Du kan naturligvis style dit <th>-tag som du vil med CSS.
Udover at det øger overskueligheden, så er det også en fordel for svagtseende og blinde, som får din hjemmeside læst op af et program. Jeg er godt klar over, at det er en lille procentdel af dine besøgende, men derfor kan man jo godt gøre siden mere imødekommende for den del.
Det næste du bør overveje er at give din tabel en beskrivelse - en såkaldt caption, hvilket også hjælper dine blinde besøgende. Det gøres meget nemt med <caption>-tagget. Så nu starter vores tabel således:



Og ser nu således ud:

Diverse information om udvalgte lande

Land	Hovedstad	Indbyggere	Areal	Styreform
Etiopien	Addis Ababa	75.067.000	1.104.300 km2	Føderal republik
Danmark	København	5.457.415	43.094 km2	Monarki
Marokko	Rabat	33.757.175	446.550 km2	Monarki
Indien	New Delhi	1,2 mia.	3.287.590 km2	Føderal republik

For at øge læsevenligheden vil jeg nu give hver anden række i tabellen en anden farve. Og det bør man jo gøre ved hjælp af CSS, så jeg har oprettet en class til den. Samtidigt fjerner jeg border="1" inde i <tabel>-tagget. Det er en uskik, at placere den dér. Den slags skal gøres med CSS. Det har jeg så gjort og tilføjet en border-collapse (synes, det er pænere).

Diverse information om udvalgte lande

Land	Hovedstad	Indbyggere	Areal	Styreform
Etiopien	Addis Ababa	75.067.000	1.104.300 km2	Føderal republik
Danmark	København	5.457.415	43.094 km2	Monarki
Marokko	Rabat	33.757.175	446.550 km2	Monarki
Indien	New Delhi	1,2 mia.	3.287.590 km2	Føderal republik

Er du interesseret i at læse mere om tabeller (på engelsk), så check http://www.w3.org/TR/REC-CSS2/tables.html.

Du kan se min CSS fil til tabel-designet her.

I anden del af mine artikler om "tabeller med html" vil jeg vise dig, hvordan du kan gøre dine tabeller endnu mere sexede.