Välkommen till whr.se, recensioner av webbhotell. I denna avdelning publicerar vi guider och artiklar runt webbteknik, programmering och marknadsföring på Internet bland annat.

CSS eller tabeller för layout?

Det finns ett antal skillnader mellan att skapa layout i CSS i jämförelse med tabeller. Här kommer några av dem.

CSS

CSS står för ”Cascading Style Sheets” och är ett språk skapat för att på ett bra sätt separera HTML-strukturen från designen.

Fördelar

  • Genom att separera HTML-strukturen från designen är det betydligt lättare att förstå koden. Stilmallen läggs med fördel i en separat fil.
  • Layouten är ”flytande” vilket gör att man kan positionera elementen fritt, till skillnad från tabeller som använder sig av ett fast rutnät.

Nackdelar

  • Alla webbläsare läser inte CSS likadant. Internet Explorer är en webbläsare som länge legat efter vad det gäller att vara kompatibel med CSS. Med Internet Explorer 9 kommer Microsoft ifatt de andra webbläsarna, även om inte heller den webbläsaren har stöd för det senaste inom CSS.
  • Att centrera element vertikalt med enbart CSS är ingen lätt uppgift. På Theme Forest finns en bra guide som visar 5 olika sätt på hur man kan göra.
  • Att få två kolumner lika höga är ett annat problem som inte är lätt att lösa med CSS. På BuildInternet.com finns 4 olika guider för hur man gör.

Tabeller

Fördelar

  • Det är enkelt att centrera innehåll i en cell.
  • Eftersom hela tabellen ses som en enhet håller den koll på kolumnernas relationer till varandra. I praktiken innebär det att om en kolumn dras ut på höjden så följer den andra med. Det kan vara en fördel om man exempelvis vill att den ena kolumnens repeterande bakgrund ska följa med hela vägen ner.

Nackdelar

Om man har en komplex webbplats och skapar den med tabeller kan det lätt bli ett ormbo av td och tr (table data och table rows). Ska man sedan lägga till flera td eller tr i den redan komplexa layouten kan man få stora problem eftersom man kan behöva göra fler anpassningar flera olika ställen för att det ska fungera.

Det anses enligt ”Best practice” att undvika tabeller för layout / design. Eftersom det inte är rekommenderat bör man istället anamma ny teknik.

Den gyllene medelvägen

Det finns som jag beskrivit både för och nackdelar med både CSS och tabeller.

Det finns en variant som är en blandning av dem båda. Man kan skapa tagg i stilmallen och ställa in så att den beter sig som en tabell, tabell-cell, eller tabell-rad. Det kan göra att man får en mindre rörig kod fritt från tabeller, men ändå dra nytta av att exempelvis få två olika kolumner lika långa.

Här är de olika fallen som de ser ut i stilmallen:

display: table;
display: table-cell;
display: table-row;
Publicerad 2011-05-16. Kategori Bygga hemsida.


Skriv en kommentar eller en fråga

This blog is kept spam free by WP-SpamFree.