Hvorfor du bør undgå tabeller til webside layouts

CSS er den bedste måde at opbygge webdesign på

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'en. 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 laver det, men så 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. Plus, hvis du opretholder websider som holdmedlem, skal du forklare for hver person, hvordan tabellerne virker 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. Og når du vil ændre layoutet på dit websted, skifter du simpelthen en CSS-fil, og hele siden kigger-ikke mere gennem 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 skal ikke altid udskrives 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 tabeldata. Og tabular data ligner generelt noget, du måske kan vise i et regneark eller muligvis en database.

Men HTML5 ændrede reglerne, og nu er tabeller til layout, men ikke anbefalet, nu gyldige HTML. HTML5-specifikationen hedder: "Tabeller skal ikke bruges som layouthjælpemidler."

Fordi tabeller til layout er vanskelige for skærmlæsere at differentiere, som jeg nævner ovenfor.

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 kraftigt 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 beder dig om ting som:

Hvis du ikke kan levere, hvad kunderne beder om, vil de stoppe med at komme til dig for design, måske ikke i dag, men måske næste år eller året efter. Kan du virkelig råd til at lade din virksomhed lide, fordi du ikke er villig til at begynde at lære 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 skulle være bygget med CSS til layout.