Tabeller med ekstra-udstyr

I den første artikel om "design af tabeller" fik vi stylet vores tabeller, så de blev lidt mere læse-/brugervenlige. I denne artikel vil jeg give dig endnu et par tips til, hvordan du kan gøre mere ud af dine tabellers udseende.

I denne del skal vi også have fat i noget JavaScript. Alt hvad vi skal gøre er at sætte en onMouseOver og en onMouseOut på hvert tr-element. Det kommer til at se således ud:

<tr id="lige" onMouseOver="this.style.backgroundColor='#999999';" onMouseOut="this.style.backgroundColor='#FFFFFF';" >
  <td >Her er dit tabel-indhold</td >
</tr >

Du skal naturligvis udskifte #999999 og #FFFFFF med de farver, du selv vil benytte (se evt. farver her).

Så vil dine rækker skifte farve, når musen er over dem, og tabellen 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

Næste effekt kan du kun bruge, hvis du har brug for at tilføje yderligere oplysninger, som du gerne vil skjule midlertidigt. Til at gøre dette har vi brug for javascript. Prøv at klikke på én af linjerne herunder - så vil du få mere information om det pågældende land.

Diverse information om udvalgte lande

Land	Hovedstad	Indbyggere	Areal	Styreform
Etiopien	Addis Ababa	75.067.000	1.104.300 km2	Føderal republik
Etiopien ligger på dét, man kalder Afrikas Horn og er dermed nabo til bl.a. Sudan, Eritrea og Kenya. Etiopien er det eneste afrikanske land, der aldrig har været koloniseret (omend italienerne prøvede en kort overgang under og efter 2. verdenskrig). Derfor har Etiopien en meget spændende og uspoleret historie og kultur.
Danmark	København	5.457.415	43.094 km2	Monarki
Danmark har den Lille Havfrue, topskat, Christiania, Pia Kjærsgaard og står sportsmæssigt stærkt i curling. Vi har også en enorm selvmordsprocent til trods for at pressen et par gange om året offentliggør undersøgelser, der viser at vi er blandt de lykkeligste mennersker i verden. Nogle danskere har podagra og nogle friværdi.
Marokko	Rabat	33.757.175	446.550 km2	Monarki
Marokko ligger længst mod vest i det nordlige Afrika. Landet har meget at byde på rent turistmæssigt. Der er for en tur på ørkenens skib ud i Sahara og overnatte under stjernene i Saharas sand. Man kan også opleve de spektaulære Atlas-bjerge eller sidde på torvet i Marrakesh og spise lækkert marokkansk mad.
Indien	New Delhi	1,2 mia.	3.287.590 km2	Føderal republik
Indien er gigantisk, imponerende, støjende og fattigt. -Og så får du noget fænomenal mad. Glem alt hvad du har lært om indisk mad i Danmark. Oveni må du nok regne med at få dig en Delhi-belly, når du er der. Men det er det hele værd.

For at opnå den sidste effekt, skal du bruge en javascript-funktion. Den kan du indsætte øverst mellem dine head-tags. Den ser således ud.

<script type="text/javascript">
 var ie = false;
 if (navigator.appVersion.indexOf("MSIE")!=-1){
  ie = true;
 }


 function toggletr(obj){
  if (obj.style.display == "none"){
   if (ie)
    obj.style.display = "block";
   else
    obj.style.display = "table-row";
   }else
    obj.style.display = "none";
   }
</script>


I den række (tr) hvor brugeren skal klikke, skal du så indsætte javascript, så den ser sådan ud (jeg har fjernet onmouseover/-out for overskuelighedens skyld):
<tr onclick="toggletr(document.getElementById('raekke_id'));return true;">

Rækken, der skal komme frem, når brugeren klikker, skal så have et id, der svarer til dét, der står i rækken ovenover. Den vil så se således ud:
<tr style="display:none;" id=raekke_id>


De to effekter, jeg har beskrevet her, kan øge brugervenligheden og jeg bruger dem selv på min side www.mXchange.dk, hvor man kan finde brugte mobiltelefoner.

Jeg håber, du har fået noget ud af de her artikler om tabel-design. Jeg arbejder i øjeblikket på endnu en artikel om design af tabeller. Du må følge med på min blog for at se, når næste artikel kommer.