Lækre tabeller

Brug tabeller - bare ikke til design

Inden 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 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 km²	Føderal republik
Danmark	København	5.457.415	43.094 km²	Monarki
Marokko	Rabat	33.757.175	446.550 km²	Monarki
Indien	New Delhi	1,2 mia.	3.287.590 km²	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 km²	Føderal republik
Danmark	København	5.457.415	43.094 km²	Monarki
Marokko	Rabat	33.757.175	446.550 km²	Monarki
Indien	New Delhi	1,2 mia.	3.287.590 km²	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:


<table border="1">

  <tr>

	   <th>Land</th>

	   <th>Hovedstad</th>

	   <th>Indbyggere</th>

	   <th>Areal</th>

	   <th>Styreform</th>

 </tr>

Nu ser vores tabel således ud:

Land	Hovedstad	Indbyggere	Areal	Styreform
Etiopien	Addis Ababa	75.067.000	1.104.300 km²	Føderal republik
Danmark	København	5.457.415	43.094 km²	Monarki
Marokko	Rabat	33.757.175	446.550 km²	Monarki
Indien	New Delhi	1,2 mia.	3.287.590 km²	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 caption, hvilket også hjælper dine blinde besøgende. Det gøres meget nemt med <caption>-tagget. Så nu starter vores tabel således:


<table border="1">

  <caption>Diverse information om udvalgte lande<caption>

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 km²	Føderal republik
Danmark	København	5.457.415	43.094 km²	Monarki
Marokko	Rabat	33.757.175	446.550 km²	Monarki
Indien	New Delhi	1,2 mia.	3.287.590 km²	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 den uskik, at sætte border="1" inde i <tabel>-tagget. Den slags skal gøres med CSS.

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

Er du interesseret i at læse mere om tables (på engelsk), så check http://www.w3.org/TR/REC-CSS2/tables.html. Der kan laves meget mere med tables, og jeg arbejder allerede på anden del af denne artikel, så check min blog - ska' nok annoncere, når der kommer nye artikler.