Drop tabeller til layout
af Joachim Cohn Jacobsen, HTML.dk
Sidst opdateret 29. juni 2003
Tabeller til layout burde efterhånden være en saga blot. Det er desværre bare ikke tilfældet. I denne artikel ridser vi kort fordelene ved CSS-design op, og giver et eksempel på, hvordan et CSS-design kan skabes.
<table>-elementet er et af de mest misbrugte HTML-elementer nogensinde. Elementet er skabt til at præsentere tabel-data. Det vil sige data som meningsfuldt kan præsenteres i kolonner og rækker, der relaterer sig til hinanden.
Desværre bliver tabeller i ekstrem udstrækning også brugt til at styre layout på websider. Det skyldes primært, at tabeller i slutningen af forrige århundrede var den eneste måde at styre layoutet på en webside tilfredsstillende.
Med udviklingen af Cascading Style Sheets (CSS), og nye browsere, er det imidlertid blevet muligt at skabe layouts der tillader at HTML udelukkende bruges til at strukturere indholdet på en webside.
Styrken ved dette er blandt andet, at en websides indhold kan gøres tilgængeligt for funktionsnedsatte brugere og på tværs af platforme.
Hvad er fordelen ved at bruge CSS til sidelayout?
Hvis du bruger CSS til dit sidelayout, kan du opnå en række fordele.
- Websidens indhold kan præsenteres i en logisk rækkefølge, hvor det vigtigste indhold kan placeres øverst i HTML-dokumentet, selvom det ikke nødvendigvis præsenteres øverst i layoutet.
- At placere det vigtigste indhold øverst, kan potentielt give en bedre placering i søgemaskiner som f.eks. Google. Søgemaskinernes robotter læser websider fra top til bund, og bruger ofte de øverste X antal linier til at vurdere sidens relevans.
- Synshandicappede brugere der får hjælp af en skærmlæser, vil bedre kunne få mening ud af indholdet på siden, hvis indholdet er struktureret logisk.
- Brugere der anvender håndholdte enheder (lommecomputere, mobiltelefoner mv.) har ofte et skærmareal der er meget mindre end en browser på en computer. En CSS-layoutet webside ombrydes nemt så indholdet præsenteres logisk og brugeren slipper for at scrolle både horisontalt og vertikalt for at få mening ud af siden.
Flere punkter kan tilføjes, men disse fire burde give dig en idé om fordelene ved et CSS-layout.
Jamen alle de store profesionelle websites bruger da tabeller til layout?
Det argument er hørt mange gange før, men det holder ikke længere.
Det er rigtigt, at mange professionelle websites stadig bruger tabeller til layout. For eksempel Computerworld, Jyllandsposten og Politiken.
Til gengæld har websites som Jubii, Berlingske Tidende, og Jobnet valgt at droppe tabellerne og bruge CSS til layout, selvom der er forskel på hvorvidt de følger W3C-standarderne. Vi ser det som et udtryk for, at CSS-layout omsider er ved at slå igennem.
Et simpelt eksempel på css-layout
I eksemplet skaber vi et design der har en top-sektion, en venstre-menu, et indholdsområde og en spalte i websidens højre side, som vist på illustrationen nedenfor.
HTML-strukturen
Vi starter med at lave en HTML-struktur for indholdet.
I vores eksempel har vi valgt at placere indholdet over de to menuer, da selve sidens indhold selvsagt bør være det mest sigende for hvad siden indeholder.
Der er dog intet entydigt svar på, hvilken rækkefølge der er mest hensigtsmæssig. Det afhænger helt af det konkrete projekt, indholdet og dets målgruppe.
Eksemplets fire indholdselementer placeres i fire <div>-elementer med hvert deres unikke id.
... <div id="title"> <h1>Websidens titel</h1> </div> <div id="content"> <h1>Dette bør være en sigende overskrift for indholdet</h1> <p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.</p> <p>Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur.</p> <p>Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas.</p> <p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas.</p> </div> <div id="leftmenu"> <p>Sidens venstre-menu indeholder....</p> <ul> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> <li>Punkt 4</li> <li>Punkt 5</li> <li>Punkt 6</li> <li>Punkt 7</li> </ul> </div> <div id="rightmenu"> <p>Fra sidens højre-menu kan man læse mere om....</p> <ul> <li>Ditten</li> <li>Datten</li> </ul> </div> ...
CSS-layoutet
Ovenstående eksempel er der jo ikke meget spas hved, da det udelukkende er en HTML-struktur.
Når vi nu anvender CSS til at placere sidens indholdselementer bliver sagen straks en anden. Vores CSS placeres i dokumentets <head>-element og ser sådan her ud, når vi placerer title, leftmenu og rightmenu med position-absolute, og placerer content ved hjælp af margin og padding.
...
<style type="text/css">
body {
margin:0px;
}
#title {
position:absolute;
left:0px;
top:0px;
width:100%;
height: 75px;
background-color:orange;
}
#leftmenu {
position:absolute;
left:0px;
top:75px;
width:150px;
background-color:silver;
}
#rightmenu {
position:absolute;
right:0px;
top:75px;
width:150px;
background-color:silver;
}
#content {
padding-top: 70px;
margin-left:160px;
margin-right:160px;
background-color:white;
}
</style>
Eksemplet viser blot en simpel måde at lave et sidelayout på. Det kan sagtens gøre mere raffineret.
For yderligere inspiration og eksempler kan du læse artiklen Brug af CSS til sideopbygning.
God fornøjelse med layoutet.
- Relateret materiale på HTML.dk
- Relaterede links om emnet
