Fra tabel til CSS

Sidst opdateret
26. februar 2005

 

Udskrift tabellayout med CSS

  Mange websider er opbygget af tabeller. DSom du måske har lært tidligere, er det idag mere almindeligt at anvende CSS og box-modellen til at strukturere websiderne. VI skal se et eksempel på hvordan en 'gammel' webside kan opdateres til CSS.

 

  Udgang punktet er denne webside.
Se html-koderne ved i browseren at vælge Vis -> Kilde
Body I mit BODY tag er f.eks indsat følgende formatering

<BODY text=gray bgColor=white><FONT face=verdana>

Jeg sletter det hele så der kun står <body>. Formateringen indsættes i stedet i et stylesheet. I eksemplet her anvendes et globalt stylesheet.
Se resultatet her. Ok - det ser ens ud - men det var også meningen.

Slet tabellerne... Nu går jeg mere radikalt til værks. Tabel-koderne skal slettes , og erstattes med div- elementer, som defineres i stylesheet'et. Øverst vil jeg have et element til mit sidehoved. Koden hertil kan se sådan ud:

.sidehoved {
width:80%;
height:80px;
}

 Efter <body> taget i websiden indsætter jeg nu <div class="sidehoved"> og klipper nu mit img-tag (som henter mit logo) samt overskrifterne ud af tabel-strukturen og op efter <div class="sidehoved"> og afslutter elementet med </div>  .
Se resultatet her. Nej det ser ikke rigtigt ud.
Jeg skal lige venstre-justere mit billede ved i img-tag'et at tilføje align="left"  . Se nu resultatet - det var meget bedre :-)

Øvrige elementer Udover sidehovedet - vil jeg have to elemeter mere på siden . en venstre margen og en højre margen. Jeg starter med igen at definere disse to elementer i mit style sheet.

.left {
width:30%;
float:left;
font-size:xx-small;
}

På tilsvarende måde definerer jeg min andet element som:

.right {
width:70%;
background-color:whitesmoke;
border-left:dashed 1px;
}

 

Fjern tabelkoder Nu fjerner jeg alle tabel koderne -altså :
<table><tr><td> og </td></tr></table> fra websiden.
Indsætter mine elementer 'left' og 'right' og flytter tekst og link m.v ind i de respektive elementer.
Se resultatet her .

der er noget galt her - jeg skal ændre bredden på elementet 'left' så det flugter med logoet ovenover. Jegkunne her vælge at bruge en fast bredde i for elementet 'left' f.eks samme bredde som billedet har. Men jeg kan også prøve mig frem med %' er . 25 % syntes at virke .
Se resultatet her.

Padding Indholdet af mine elementer (teksten)  er klinet op af kanterne på elementerne. Det ændres med egenskaben 'padding' som jeg tilføjer i mit stylesheet og giver værdien '10px'
Se resultat - det var meget bedre..:-)
 
  Check også koderne i websiden ... se hvor smukt det nu er - ingen tabelkoder. Vi er ved at adskille indholdet ( vores tekst m.v.) fra layout .
fremover vil det være nemmere at oprette nye sider og redigere eksisterende. I virkelighedens verden - vil man selvflig lægge stylesheetet som et 'linked stylesheet' dvs. som en separat fil.
 
Det videre arbejde Jeg når pt ikke at lave mere på eksemplet her.
Men det man kunne gøre var f.eks. at indsætte et element som sidefod - ligesom med sidehovedet. Måske sidehovedet skulle deles op i to underelementer - et til logo og et til overskrifter .
© Otto leholt

Til top af siden