Se mor, uden tabeller!

I begyndelsen af oktober (2001) læst jeg en interessant artikel på www.webref.com. Artiklen handlede om, hvorledes et par websmede havde forsøgt at efterlave dette websteds layout uden brug af tabeller, men ved brug af stylesheets. Jeg syntes, det så interessant ud og besøgte et par af de websteder, der var nævnt i referencelisten. Det var lidt af en åbenbaring for mig.

Grundlæggende er der tale om om at kaste en del lærdom om, hvorledes vi layouter websider, ud, til fordel for en konsekvent udnyttelse af CSS boksmodellen – altså ideen om, at ethvert HTML-element er indesluttet i en rektangulær kasse, hvis egenskaber – herunder position i forhold til andre elementer – vi snildt kan kontrollere via et stylesheet.

Ideen er oplagt. En af grundene til, at den har været lidt længe undervejs er, at version 4. browserne – inkluderet Internet Explorer 5 – har været så mangelfulde i deres fortolkning af CSS-standarderne, at forehavender som det beskrevne hidtil har været dømt til at mislykkes.

Så forudsætningen for at kaste tabellerne over bord og udelukkende bruge CSS til tekst- og ikke mindst sideformatering (og tabeller til det, der er beregnet til, nemlig formatering af inline data) er, at vi opgiver tanken om smukke layouts i version 4 og ældre browsere.

Som belønning for denne intellektuelle øvelse får vi opdagelsen af, at den konsekvente og omhyggelige brug af CSS-teknologien medfører, at vore websider tegner sig særdeles nydeligt i disse browsere. Uden alle falbeladerne forstås, men særdeles læseligt og logisk layoutet. Det er næsten en bonus i sig selv, hvis vi tænker på søgemaskiner, tekstanalyseværktøjer og de svagtseendes skærmlæsere.

For at illustrere fænoment har jeg lavet et skærmdump af forsiden til dette websted som den ses i Netscape version 4.73 (april 2006) og sat det ind som illustration til denne side. Som det ses, er alle oplysningerne på siden, og de kommer i en logisk rækkefølge.

Denne side er senest opdateret: June 25, 2008