Lära sig att skriva CSS layouter kan vara knepiga, särskilt om du är bekant med att använda tabeller för att skapa snygga webbsidlayouter. Men medan HTML5 tillåter tabeller för layout, det är ingen bra idé.
Tabeller är inte tillgängliga
Liknande sökmotorer, de flesta skärmläsare läser webbsidor i den ordning de visas i HTML-koden, och tabeller kan vara mycket svåra för skärmläsare att analysera. Innehållet i en tabelllayout, även om det är linjärt, är inte alltid meningsfullt när det läses från vänster till höger och uppifrån och ner. Plus, med kapslade tabeller och olika spann på bordscellerna kan göra det svårt att räkna ut sidan.
Detta är anledningen till att HTML5-specifikation rekommenderar mot tabeller för layout och varför HTML 4.01 inte tillåter det. Tillgängliga webbsidor gör att fler kan använda dem och är en professionell designer.
Med CSS kan du definiera ett avsnitt som tillhör till vänster på sidan men placera det sist i HTML. Då läser skärmläsare och sökmotorer de viktiga delarna (innehållet) först och de mindre viktiga delarna (navigering) sist.
Tabellerna är knepiga
Även om du skapar en tabell med en webbredigerare kommer dina webbsidor fortfarande att vara komplicerade och svåra att underhålla. Förutom de enklaste webbdesignerna kräver de flesta layouttabeller användning av många och attribut och kapslade tabeller.
Att bygga bordet kan verka enkelt medan du gör det, men när det är klart måste du behålla det. Sex månader senare är det kanske inte lika lätt att komma ihåg varför du kapslade tabellerna eller hur många celler som var i rad och så vidare. För att inte tala om, om du underhåller webbsidor som teammedlem, måste du förklara för alla inblandade hur tabellerna fungerar eller förvänta sig att de tar ytterligare tid när de behöver göra ändringar.
CSS kan också vara komplicerat, men det håller presentationen separat från innehållet och gör det mycket lättare att underhålla på lång sikt. Dessutom kan du med CSS-layout skriva en CSS-fil och utforma alla dina sidor så att de ser ut. När du sedan vill ändra layouten på din webbplats ändrar du bara en CSS-fil och hela webbplatsändringar - inte längre går igenom varje sida en i taget för att uppdatera tabellerna för att uppdatera layout.
Tabeller är oflexibla
Även om det är möjligt att skapa tabelllayouter med procentuella bredder är de ofta långsammare att ladda och kan dramatiskt ändra din layout. Men om du använder angivna bredder för dina bord får du en mycket styv layout som inte ser bra ut på bildskärmar som har olika storlek än din egen.
Att skapa flexibla layouter som ser bra ut på många bildskärmar, webbläsare och upplösningar är relativt enkelt. Faktum är att med CSS-mediefrågor kan du skapa separata mönster för olika skärmar.
Tabeller skadade sökmotoroptimering
Den vanligaste tabellskapade layouten använder ett navigeringsfält till vänster på sidan och huvudinnehållet till höger. När du använder tabeller kräver detta tillvägagångssätt (vanligtvis) att det första innehållet som visas i HTML-filen är det vänstra navigeringsfältet. Sökmotorer kategoriserar sidor baserat på innehållet, och många motorer avgör att innehåll som visas högst upp 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 avgöra var det ska placeras i designen. Detta innebär att sökmotorerna kommer att se det viktiga innehållet först, även om designen placerar det lägre på sidan.
Tabeller skrivs inte alltid bra ut
Många bordsdesigner skriver inte bra ut eftersom de helt enkelt är för breda för skrivaren. Så, för att få dem att passa, skär webbläsarna av tabellerna och skriver ut avsnitt nedan vilket resulterar i separerade sidor. Ibland hamnar du med sidor som ser bra ut, men hela högersidan saknas. Andra sidor kommer att skriva ut avsnitt på olika ark.
Med CSS kan du skapa ett separat formatmall bara för att skriva ut sidan.
Tabeller för layout är ogiltiga i HTML 4.01
De HTML 4-specifikationstillstånd: "Tabeller ska inte användas enbart för att utforma dokumentinnehåll, eftersom detta kan ge problem vid rendering till icke-visuella medier."
Så om du vill skriva giltig HTML 4.01 kan du inte använda tabeller för layout. Du bör bara använda tabeller för tabelldata, och tabelldata ser vanligtvis ut som något du kan visa i ett kalkylark eller eventuellt en databas.
HTML5 ändrade dock reglerna och nu anses tabeller för layout, även om de inte rekommenderas, vara giltiga HTML. HTML5-specifikationen säger: "Tabeller ska inte användas som layouthjälpmedel." Detta beror på att tabeller för layout är svåra att skilja på skärmläsare, som tidigare nämnts.
Att använda CSS för att placera och utforma dina sidor är det enda giltiga HTML 4.01-sättet att få de mönster du använde för att använda tabeller för att skapa, och HTML5 rekommenderar starkt också den här metoden.