herlig.net

Kast tabellane!

Tabellar som layoutverktøy

Det var en gang ei gruppe folk som fant ut at dei ville opprette en organisasjon som skulle styre webstandarder, slik at det framtidige internett for offentligheten kunne holde seg til standardiserte måter å gjøre ting på. Dette skjedde i 1994, og organisasjonen er W3C (World Wide Web Consortium). I denne perioden var struktureringsspråket HTML på et relativt tidlig stadie, og “design” på internett slik vi kjenner det i dag var eit ubetydelig tema. Etter kvart som internett utvikla seg, og fleire webansvarlege fekk opna kikkehola sine for estetikk, blei begrepet “webdesign” meir eller mindre innført.

Når folk begynte å “designe” websider, hadde dei veldig begrensa ting å gjøre det med – heilt til en eller anna gluping fant ut at dei kunne styre en slags layout ved hjelp av tabellar, ved å gjøre noke så enkelt som å legge til border="0" i table-taggen. Slik blei altså tabeller som layoutverktøy innført, og det blei en veldig vanleg metode å gjere det på. Ja, til og med denne organisasjonen – W3C – gav folk lov til dette.

I dei seinare år har ting forandra seg litt. CSS har blitt en vanleg del av webdesign, og strukturbasert HTML-koding (semantikk) har blitt viktig. Kort forklart er dette logisk bruk av element i HTML. p-elementet (paragraph) skal brukast til avsnitt, ul-elementet (Unordered List) til å markere usorterte lister – og kanskje det som er viktigast i denne artikkelen – table- elementet (tabell) skal brukast til å markere tabeller, ikkje layout.

Ordbok.no:
semantikk ~tik´k - en (fra gr
‘betydningsvitenskap’, av sema ‘tegn’) vitenskapen om ordenes betydning.

Kvifor ikkje?

Fordi det er feil. Vel – dette var kanskje ikkje et ønska svar, så eg skal forklare litt nærmare.

Først og fremst, ifølge nyare spesifikasjoner, så er ikkje lenger tabellar gyldige layoutverktøy. Altså, det er stikk i strid med nye standarder for HTML, språket websider blir koda i.

Så, nummer to, som kanskje er endå viktigare: Det gir ikkje meining å lage layout med tabeller. Finner du det logisk at du ser på ein einaste diger tabell når du besøker vg.no?

Tredje punkt: Tabell-layout tar mykje meir plass enn strukturbasert HTML, og større filer fører til meir båndbreddebruk av den som styrer sida. Dessutan tar det lengre tid å laste ned ei slik side for folk som framleis sit på treige linjer.

Sist, men ikkje minst: Tabell-kode er vanvittig mykje mindre oversiktlig, og er et reint helvete å ha med å gjere. Vanskeleg å oppdatere, vanskeleg å finne fram i… Det må fleire gonger så mykje kode til for å få til ein tabell-layout, som for ein layout basert på strukturbasert HTML

Den egentlige grunnen til at du skal skrive semantisk kode – la vere å bruke tabeller til layout – er at folk som ikkje har høgoppløselege, grafiske nettlesarar vil oppleve sida di som noko heilt anna enn den eigentleg er. For eksempel, talenettlesarar for blinde; PCen les opp sida for dei. Med ein typisk tabell-layout vil nettlesaren tolke sida som det den skal tolkast som, ein tabell, og dette vil antageligvis forvirre brukar meir enn nødvendig, og han/ho vil ikkje kunne få særlig mykje meining ut i frå innhaldet.

Gjeld også nettlesarar for svaksynte, der forskjellige element er skild ut med store kontrastar, grafikk er fjerna – ting vil sjå heilt grusomt ut, og det vil bli veldig forvirrande. Om du brukar Opera, kan du skru på “User mode” og “Emulate text browser”, for å få eit enkelt inntrykk av kor forvirrande ei tabellside kan bli.

Eit anna enkelt eksempel er på mobiltelefonar. Med ein vanleg tabell-layout vil du antageligvis måtte scrolle mykje horisontalt i tillegg til vertikalt, som er eit stort irritasjonsmoment.

Så kva skal eg gjere då?

Du skal skrive semantisk kode – strukturbasert HTML. Ved hjelp av CSS kan du få fram den visuelle formateringa du måtte ønske, men for folk som sit på typen nettlesarar eg nevnte over, vil CSS bli deaktivert, og innhaldet vil komme fram i perfekt form. Slikt skapar brukarvennlegheit over fleire plan!

Og korleis?

Divisjonar, div-element. Grunnen til at du bør bruke desse er enkelt og greit at det er ikkje feil å bruke dei til layout. Det vil seie, det gir ikkje noko logisk meining å bruke dei, ei heller å ikkje bruke dei. Nettopp på grunn av dette har div-elementet blitt det som “erstattar” tabellar som layoutverktøy.

Ved hjelp av slike divisjonar kan du gruppere innhaldsdelar slik du vil, og bruke CSS til å formatere dei visuelt.

At du ikkje skal bruke tabellar til layout, betyr ikkje at du ikkje skal bruke dei i det heile tatt. table er fortsatt eit element på lik linje med alle andre, og det har si oppgave på lik linje med alle andre. Oppgava til table-elementet er å vise tabulær data. Ting som passar under her kan vere statistikk, forskjellige former for oppramsing av informasjon e.l. Å bruke tabellar til dette vil vere heilt riktig, og semantisk – altså “lovlig og anbefalt” ifølge dei nyaste standardane.

Merk deg med ein gong ein liten ting til: Sjølv om eg i denne artikkelen kun gjekk spesifikt innpå bruken av tabellar, så skal du halde deg semantisk på andre område også. Semantikk gjer det offentlege internett ein brukarvennleg plass for alle!

Snipp, snapp, snute, så var tabellar ute!