At lære at skrive CSS layout kan være vanskelig, især hvis du er fortrolig med at bruge tabeller til at skabe smarte websidelayouter. Men mens HTML5 tillader tabeller til layout, er det ikke en god idé.
Tabeller er ikke tilgængelige
Svarende til søgemaskiner, de fleste skærmlæsere læser websider i den rækkefølge, de viser i HTML, og tabeller kan være meget vanskelige for skærmlæsere at analysere. Indholdet i et tabellayout, mens det er lineært, giver ikke altid mening, når det læses fra venstre mod højre og top til bund. Plus med indlejrede tabeller og forskellige spændvidder på bordcellerne kan gøre siden vanskelig at finde ud af.
Dette er grunden til, at HTML5-specifikation anbefaler imod tabeller til layout og hvorfor HTML 4.01 ikke tillader det. Tilgængelige websider tillader flere mennesker at bruge dem og er mærket for en professionel designer.
Med CSS kan du definere en sektion som tilhørende i venstre side af siden, men placere den sidst i HTML. Derefter læser skærmlæsere og søgemaskiner både de vigtige dele (indholdet) først og de mindre vigtige dele (navigation) sidst.
Tabeller er vanskelige
Selvom du opretter en tabel med en webeditor, vil dine websider stadig være komplicerede og vanskelige at vedligeholde. Bortset fra de mest enkle websidesigner kræver de fleste layouttabeller brug af mange og attributter og indlejrede tabeller.
At bygge bordet kan virke let, mens du gør det, men når det er gjort, skal du vedligeholde det. Seks måneder senere er det måske ikke så let at huske, hvorfor du indlejrede bordene, eller hvor mange celler der var i træk og så videre. For ikke at nævne, hvis du vedligeholder websider som et teammedlem, skal du forklare alle involverede, hvordan tabellerne fungerer, eller forvente, at de tager ekstra tid, når de har brug for at foretage ændringer.
CSS kan også være kompliceret, men det holder præsentationen adskilt fra indholdet og gør det meget lettere at vedligeholde i det lange løb. Plus, med CSS-layout kan du skrive en CSS-fil og style alle dine sider for at se sådan ud. Så når du vil ændre layoutet på dit websted, skal du blot ændre en CSS-fil og det hele webstedsændringer - ikke mere gennem hver side en ad gangen for at opdatere tabellerne for at opdatere layout.
Tabeller er ufleksible
Selvom det er muligt at oprette tabellayouter med procentuelle bredder, er de ofte langsommere at indlæse og kan dramatisk ændre, hvordan dit layout ser ud. Men hvis du bruger specificerede bredder til dine tabeller, ender du med et meget stift layout, der ikke ser godt ud på skærme, der har en anden størrelse end din egen.
Det er relativt let at oprette fleksible layout, der ser godt ud på mange skærme, browsere og opløsninger. Faktisk kan du med CSS-medieforespørgsler oprette separate designs til forskellige størrelsesskærme.
Tabeller skader søgemaskineoptimering
Det mest almindelige tabeloprettede layout bruger en navigationslinje i venstre side af siden og hovedindholdet til højre. Når du bruger tabeller, kræver denne tilgang (generelt), at det første indhold, der vises i HTML, er den venstre navigationslinje. Søgemaskiner kategoriserer sider baseret på indholdet, og mange motorer bestemmer, at indholdet, der vises øverst på siden, er vigtigere end andet indhold. Så en side med venstre navigation først ser ud til at have indhold, der er mindre vigtigt end navigationen.
Ved hjælp af CSS kan du placere det vigtige indhold først i din HTML og derefter bruge CSS til at bestemme, hvor det skal placeres i designet. Det betyder, at søgemaskiner først vil se det vigtige indhold, selvom designet placerer det lavere på siden.
Tabeller udskrives ikke altid godt
Mange borddesign udskrives ikke godt, fordi de simpelthen er for brede til printeren. Så for at få dem til at passe, skærer browsere tabellerne ud og udskriver sektionerne nedenfor, hvilket resulterer i adskilte sider. Nogle gange ender 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 kun til udskrivning af siden.
Tabeller til layout er ugyldige i HTML 4.01
Det HTML 4-specifikationstilstande: "Tabeller bør ikke bruges udelukkende som et middel til layout af dokumentindhold, da dette kan give 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 tabeldata ser generelt ud som noget, du muligvis viser i et regneark eller muligvis en database.
HTML5 ændrede dog reglerne, og nu betragtes tabeller til layout, selvom det ikke anbefales, som gyldig HTML. HTML5-specifikationen siger: "Tabeller skal ikke bruges som layouthjælpemidler." Dette skyldes, at tabeller til layout er vanskelige for skærmlæsere at skelne, som tidligere nævnt.
Brug af 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 også stærkt denne metode.