At lære at skrive CSS layouter kan være vanskelig, især hvis du er bekendt med at bruge tabeller til at skabe fancy webside layouts. Men mens HTML5 tillader tabeller til layout, er det ikke en god idé.
Borde er ikke tilgængelige
Ligesom søgemaskiner læser de fleste skærmlæsere websider i den rækkefølge, de vises i HTML'et, og tabeller kan være meget svært for skærmlæsere at analysere. Dette skyldes, at indholdet i et bordlayout, mens det er lineært, ikke altid giver mening, når man læser venstre til højre og øverst til bund. Plus, med indlejrede tabeller og forskellige spænd på bordet kan cellerne gøre siden meget svært at regne ud.
Dette er grunden til, at HTML5-specifikationen anbefaler mod tabeller til layout og hvorfor HTML 4.01 udelukker det. Tilgængelige websider giver flere mennesker mulighed for at bruge dem og er karakteren af en professionel designer.
Med CSS kan du definere en sektion som tilhørende på venstre side af siden, men placere den sidst i HTML'en. Så vil både læsere og søgemaskiner læse de vigtige dele (indholdet) først og de mindre vigtige dele (navigation) sidst.
Borde er vanskelige
Selvom du opretter en tabel med en webredaktør, vil dine websider stadig være meget komplicerede og vanskelige at vedligeholde. Bortset fra de mest enkle websidedesigner kræver de fleste layouttabeller brugen af mange og attributter og indlejrede tabeller.
At opbygge bordet kan virke nemt, mens du gør det, men når det er færdigt skal du vedligeholde det. Seks måneder ned i køen er det måske ikke så nemt at huske, hvorfor du nestede bordene, eller hvor mange celler var i træk og så videre. For ikke at nævne, skal du forklare alle involverede, hvordan tabellerne fungerer, eller forventer, at de tager ekstra tid, når de skal foretage ændringer.
CSS kan også være kompliceret, men det holder præsentationen adskilt fra HTML'en og gør det meget nemmere at opretholde i det lange løb. Plus, med CSS layout kan du skrive en CSS fil, og stil alle dine sider til at se den måde. Så når du vil ændre layoutet på dit websted, ændrer du simpelthen en CSS-fil, og hele webstedet ændres - ikke mere igennem hver side en ad gangen for at opdatere tabellerne for at opdatere layoutet.
Tabeller er ufleksible
Selvom det er muligt at oprette tabellayouter med procentvise bredder, er de ofte langsommere at indlæse og kan dramatisk ændre hvordan layoutet ser ud. Men hvis du bruger specificerede bredder til dine tabeller, slutter du med et meget stift layout, som ikke ser godt ud på skærme, der er forskellig fra din egen.
At skabe fleksible layouter, der ser godt ud på mange skærme, browsere og opløsninger, er forholdsvis let. Faktisk kan du med CSS-medieforespørgsler oprette separate design til forskellige størrelsesskærme.
Nested tabeller indlæse mere langsomt end CSS for samme design
Den mest almindelige måde at skabe fancy layout med tabeller på er at "nest" tabeller. Dette betyder at et (eller flere) bord er placeret inde i et andet. Jo flere tabeller der er indlejret, jo længere tid vil det tage for browseren at gøre siden.
I de fleste tilfælde bruger et bordlayout flere tegn til at oprette end et CSS-design. Og færre tegn betyder mindre at downloade.
Tabeller kan skade Search Engine Optimization
Den mest almindelige tabel oprettet layout har en navigationslinje på venstre side af siden og hovedindholdet til højre. Når du bruger tabeller, kræver dette (generelt), at det første indhold, der vises i HTML'en, er den venstre navigeringslinje. Søgemaskiner kategoriserer sider baseret på indholdet, og mange motorer bestemmer, at indhold vist øverst på siden er vigtigere end andet indhold. Så vil en side med venstre navigation først vise sig at have indhold, der er mindre vigtigt end navigationen.
Ved hjælp af CSS kan du først sætte det vigtige indhold i din HTML og derefter bruge CSS til at bestemme, hvor det skal placeres i designet. Det betyder, at søgemaskiner vil se det vigtige indhold først, selvom designet placerer det ned på siden.
Tabeller Udskriv ikke altid godt
Mange borddesigner udskriver ikke godt, fordi de simpelthen er for brede til printeren. Så for at gøre dem tilpas, vil browsere skære tabellerne af og udskrive sektioner nedenfor, hvilket resulterer i meget uensartede sider. Nogle gange slutter du med sider, der ser okay ud, men hele højre side mangler. Andre sider udskriver sektioner på forskellige ark.
Med CSS kan du oprette et separat stilark bare for at udskrive siden.
Tabeller til layout er ugyldige i HTML 4.01
I HTML 4-specifikationen hedder det: "Tabeller bør ikke bruges udelukkende som et middel til at oprette dokumentindhold, da dette kan medføre problemer, når de gengives til ikke-visuelle medier."
Så hvis du vil skrive gyldig HTML 4.01, kan du ikke bruge tabeller til layout. Du bør kun bruge tabeller til tabular data, og tabular data ser generelt ud som noget du kan vise i et regneark eller muligvis en database.
Men HTML5 ændrede reglerne, og nu er tabeller til layout, mens de ikke anbefales, nu betragtes som gyldige HTML. HTML5-specifikationen hedder: "Tabeller skal ikke bruges som layouthjælpemidler." Dette skyldes, at tabeller til layout er vanskelige for skærmlæsere at differentiere som tidligere nævnt.
Brug CSS til at placere og layout dine sider er den eneste gyldige HTML 4.01 måde at få de designs, du brugte til at bruge tabeller til at oprette, og HTML5 anbefaler stærkt også denne metode.
Tabeller til layout kan påvirke dine jobudsigter
Efterhånden som flere og flere nye designere lærer HTML og CSS, bliver dine færdigheder ved at opbygge bordlayouter i mindre og mindre efterspørgsel. Ja, det er rigtigt, at kunderne ikke typisk fortæller dig den nøjagtige teknologi, du skal bruge til at opbygge deres websider, men de anmoder om ting som:
- Tilgængelige websider: Design, der kan ses af skærmlæsere, bliver mandat af mange lande, og virksomheder finder tilgængelighed mere og mere vigtigt hver dag.
- Vedligeholdelige websider: design, de kan tage med dem, selvom du ikke vil opretholde dem i fremtiden.
- Fleksible design: design, der arbejder på tværs af mange browsere, opløsninger og enheder.
- Hurtig download af sider: Hastigheden bliver mere og mere vigtig, selv til SEO.
- Udskrivbare designs: sider, der udskrives uden specielle scripts eller ekstra sider.
Hvis du ikke kan levere, hvad kunderne beder om, vil de stoppe med at komme til dig for design - periode. Kan du virkelig råd til at lade din virksomhed lide, fordi du ikke er villig til at lære og indarbejde en teknik, der har været i brug siden slutningen af 1990'erne?
Moralen: Lær at bruge CSS
CSS kan være svært at lære, men noget værd er værd at gøre. Hold ikke dine evner stagnerende. Lær CSS og opbygg dine websider som de var ment at blive bygget - med CSS til layout.
