Att lära sig att skriva CSS-layouter kan vara knepigt, särskilt om du är bekant med att använda tabeller för att skapa fina webbsidor. Men medan HTML5 tillåter tabeller för layout, är det inte en bra idé.
Tabeller är inte tillgängliga
Precis som sökmotorer läser de flesta skärmsläsare webbsidor i den ordning de visas i HTML, och tabeller kan vara mycket svåra för skärmsläsare att analysera. Detta beror på att innehållet i en tabelllayout, samtidigt som det är linjärt, inte alltid ger mening när man läser från vänster till höger och från topp till botten. Plus, med kapslade tabeller och olika spänningar på bordet kan cellerna göra sidan mycket svår att räkna ut.
Det här är anledningen till att HTML5-specifikationen rekommenderar mot tabeller för layout och varför HTML 4.01 inte tillåter det. Tillgängliga webbsidor tillåter fler människor att använda dem och är märket för en professionell designer.
Med CSS kan du definiera en sektion som tillhör på vänster sida av sidan men placera den sist i HTML-koden. Då kommer både skärmsläsare och sökmotorer att läsa de viktiga delarna (innehållet) först och de mindre viktiga delarna (navigering) senast.
Tabeller är knepiga
Även om du skapar ett bord med en webredaktör, är dina webbsidor fortfarande mycket komplicerade och svåra att behålla. Förutom de enklaste webbdesignerna kräver de flesta layouttabeller användningen av många och attribut och nestade tabeller.
Att bygga bordet kan verka lätt när du gör det, men när det är klart måste du behålla det. Sex månader längs linjen kan det inte vara så lätt att komma ihåg varför du nestade tabellerna eller hur många celler var i rad och så vidare. För att inte tala om, om du behåller webbsidor som en lagmedlem, måste du förklara för alla inblandade hur tabellerna fungerar eller förväntar sig att de tar ytterligare tid när de behöver göra ändringar.
CSS kan också vara komplicerat, men det håller presentationen skild från HTML och gör det mycket lättare att behålla i det långa loppet. Plus, med CSS-layout kan du skriva en CSS-fil och utforma alla dina sidor för att se på så sätt. När du vill ändra layouten på din webbplats ändrar du helt enkelt en CSS-fil, och hela webbplatsen ändras - inte längre går igenom varje sida en åt gången för att uppdatera tabellerna för att uppdatera layouten.
Tabellerna är oflexibla
Medan det är möjligt att skapa tabelllayouter med procentuella bredder, är de ofta långsammare att ladda och kan dramatiskt ändra hur layouten ser ut. Men om du använder angivna bredder för dina tabeller, hamnar du med en mycket stel layout som inte ser bra ut på bildskärmar som är annorlunda än dina egna.
Att skapa flexibla layouter som ser bra ut på många skärmar, webbläsare och upplösningar är relativt lätta. Faktum är att du kan skapa separata mönster för olika storlekskärmar med CSS-mediafrågor.
Nested Tabeller ladda mer långsamt än CSS för samma design
Det vanligaste sättet att skapa fina layouter med tabeller är att "boa" tabeller. Det betyder att ett (eller flera) bord placeras inuti ett annat. Ju fler bord som är kapslade desto längre tid tar det för webbläsaren att göra sidan.
I de flesta fall använder en tabelllayout flera tecken att skapa än en CSS-design. Och färre tecken betyder mindre att ladda ner.
Tabeller kan skada sökmotoroptimering
Den vanligaste tabellen skapade layouten har en navigeringsfält på vänster sida av sidan och huvudinnehållet till höger. När du använder tabeller kräver detta (generellt) att det första innehållet som visas i HTML-skivan är den vänstra navigeringsfältet. Sökmotorer kategoriserar sidor baserat på innehållet, och många motorer bestämmer att innehåll som visas överst på sidan är viktigare än annat innehåll. Så, en sida med vänster navigering först, verkar ha innehåll som är mindre viktigt än navigeringen.
Med CSS kan du lägga det viktiga innehållet först i din HTML och sedan använda CSS för att bestämma var den ska placeras i designen. Det betyder att sökmotorer förstår det viktiga innehållet, även om designen placerar den nedåt på sidan.
Tabeller skriver inte alltid ut
Många borddesigner skriver inte ut bra eftersom de bara är för breda för skrivaren. Så, för att göra dem passande, kommer webbläsare att skära av tabellerna och skriva ut sektioner nedan vilket resulterar i mycket ojämna sidor. Ibland slutar du med sidor som ser bra ut, men hela höger sida saknas. Andra sidor kommer att skriva ut sektioner på olika ark.
Med CSS kan du skapa ett separat stilark bara för att skriva ut sidan.
Tabeller för layout är ogiltiga i HTML 4.01
I HTML 4-specifikationen anges: "Tabeller ska inte användas rent som ett sätt att layouta dokumentinnehåll, eftersom det kan uppstå problem när det görs till icke-visuella medier."
Så, om du vill skriva giltig HTML 4.01, kan du inte använda tabeller för layout. Du borde bara använda tabeller för tabelldata, och tabelldata ser vanligtvis ut som något du kan visa i ett kalkylblad eller eventuellt en databas.
Men HTML5 ändrade reglerna och nu tabeller för layout, men inte rekommenderas, anses nu vara giltig HTML. I HTML5-specifikationen anges: "Tabeller ska inte användas som layouthjälpmedel." Detta beror på att tabeller för layout är svåra för skärmsläsare att skilja, som tidigare nämnts.
Med CSS att placera och layouta dina sidor är det enda giltiga HTML 4.01-sättet för att få de mönster du brukade använda tabeller för att skapa, och HTML5 rekommenderar starkt den här metoden.
Tabeller för layout kan påverka dina jobbutsikter
Som fler och fler nya designers lär sig HTML och CSS kommer dina färdigheter vid byggnadstabelllayout att vara i mindre och mindre efterfrågan. Ja, det är sant att kunder inte typiskt berättar för exakt vilken teknik du ska använda för att bygga sina webbsidor, men de ber om saker som:
- Tillgängliga webbsidor: Mönster som kan ses av skärmsläsare är uppdrag av många länder och företag ser tillgänglighet allt viktigare varje dag.
- Hållbara webbsidor: mönster som de kan ta med dem även om du inte kommer att behålla dem i framtiden.
- Flexibla mönster: mönster som fungerar över många webbläsare, resolutioner och enheter.
- Snabb nedladdning av sidor: Snabbhet blir allt viktigare, även till SEO.
- Utskriftsbara mönster: sidor som skrivs ut utan speciella skript eller extra sidor.
Om du inte kan leverera vad kunderna ber om, kommer de sluta komma till dig för mönster - period. Kan du verkligen råd att låta din verksamhet lida för att du inte är villig att lära dig och införliva en teknik som har använts sedan slutet av 1990-talet?
Moralen: Lär dig att använda CSS
CSS kan vara svårt att lära sig, men någonting som är värt är värt ansträngningen. Håll inte dina färdigheter stagnerande. Lär CSS och bygga dina webbsidor så som de var tänkt att byggas - med CSS för layout.
