Tabel-Based Design Vs. CSS Design

November 22

Tabel-Based Design Vs. CSS Design


De første websider på internettet indeholdt lidt mere end tekst og hyperlinks. Som internettets popularitet voksede dog Webdesign voksede de gældende HTML standarder og kapaciteter tilgængelige browsere. Designere havde brug for en måde at skabe komplicerede web design, Internet Explorer og Netscape browsere vil vise den samme måde. Ud af dette behov kom table-baseret design, hvor designere brugte HTML table tags - betød for visning tabelform af data - at skabe strukturen for et websted design. Siden omkring 2002, men web-fagfolk begyndte overvejer table-baserede layouts som en dårlig kodning teknik.

Baggrund

Tidligt i 2001, den indflydelsesrige online publikation en liste Bortset offentliggjort en artikel med titlen "Fra tabel Hacks til CSS Layout", som udløste en heftig debat blandt webdesignere. Mange designere og programmører var tilbageholdende med at stoppe med at bruge prøvede og sande table-baserede designs. I 2001, browser support til CSS (Cascading Style Sheets) var begrænset. Internet Explorer 6 blev udgivet samme år og havde den bedste CSS støtte for sin tid, men at støtten omfattede mange bugs. De mest berygtede IE6 bugs - den "box model bug" og "double margin bug" - anrettede ravage på ellers godt kodede CSS-baserede layouts. Af disse grunde, det tog et par år for designere at droppe tabel-baserede koder for CSS-baseret kodning.

Hvordan Tabel Layouts Work

Tabel layouts bruge HTML-tabel tags til at skabe en struktur for webstedets grafik og indhold. Det klassiske eksempel er af en tre-kolonne layout med en overskrift og sidefod. I en tabel-baseret layout, designere bruger HTML-tags til at oprette en tabel med en to-søjle-dækkende celle på de øverste og nederste rækker. Bordets midterste række indeholder tre celler, og hver celle er en kolonne for webstedet. Attributter, der ikke længere bruges i HTML 4 og op tillod programmører til at kontrollere afstand, polstring, bredde og højde på tabelceller.

Hvordan CSS layouts Work

Layouts kontrolleres af CSS korrekt adskille indhold fra præsentation. Det betyder, at HTML-filen indeholder det indhold - tekst, billeder, etc. - mens CSS definerer, hvor indholdet vises på siden. Designere kan linke en CSS-fil til hver side på webstedet, og som følge heraf, være i stand til at ændre hele webstedets design ved at ændre, at en CSS-fil. Standarden CSS erstatning for table tags i HTML 4 og XHTML er den <div> tag, selv om HTML 5 introducerer nye <section> og <til side> tags, der bærer mere mening i deres navne, end <div>. CSS-fil bruger klassen eller id-attribut til at målrette specifikke <div> tags.

Hvorfor Tabel layouts er Bad

Tabel-baserede layouts kræver ændringer på hver side i stedet, når designet er ændret. Selv hvis en tabel-baseret layout bruger nogle CSS til stil, for at ændre layout struktur, kræves ændringer på hver side. Ved opdatering en tabel-baseret layout, finde indholdet at redigere er vanskeligere i labyrinten-lignende kode af tabeller indlejret i tabeller. Webdesignere kan opkræve ekstra for den tid, det tager at redigere table-baserede layouts, eller de vil foreslå ophugning det aktuelle websted helt. Et andet resultat af table-baserede layouts er oppustet kode. Store hjemmesider med tung trafik har ikke råd oppustet kode på grund af båndbredde omkostninger.


relaterede artikler