SÖK:

Avdelningar


Blogroll


Arkiv


CSS border-collapse - sammanfoga kanter i tabeller (table border)

[ 2008-05-20 ] - Avdelningar: Design & Ergonomi, Tips & Trix |

Först lite om CSS (klicka här om du vill komma direkt till border-collapse):

CSS står för Cascading Style Sheets (kallas oftast bara style sheets) och är sätt att definiera och omdeniera formatering av HTML-element (även kallade taggar). Om du t.ex. använder HTML-taggen h4 till rubriken “CSS border-collapse” får du följande resultat:

CSS border-collapse

På denna sida används CSS för att formatera om taggen h4 och resultatet blir:

CSS border-collapse

Många formateringar är inte möjliga med ren HTML

Att ändra textfärg och textstorlek är enkelt med HTML, t.ex. genom <h4><font size=”2″ color=”#ff6538″ face=”Arial”>CSS border-collapse</font></h3>. Redan här går det inte att ändra texttjockleken med HTML, dessutom skulle man bli tvungen att skriva HTML-för varje h4-rubrik. Med CSS kan du definiera på ett enda ställe, antingen inom HEADER eller en extern fil som då kan “återanvändas” på flera av dina HTML-dokument.

CSS border-collapse

Tabeller och celler kan ges kanter (eng: border). Med hjälp av HTML kan man ange tjocklek och färg. Däremot man kan inte ange att endast 1px (pixel) tjock kant visas mellan varje cell. Man kan sätta tjockleken till 1px men detta resulterar 2px tjock kant mellan cellerna (1px från varje cell). Det finns sätt att ta sig runt detta problem men inget är uttryckligen exakt som border-collapse.

Genom att sätta table { border-collapse: collapse; } slås kanterna från vardera cell ihop till en enda. Se nedan:

Utan border-collapse:

cell 1 cell 2

Med border-collapse:

cell 1 cell 2

Och varför skriver jag om just border-collapse? … Låt säga att man lär sig nåt nytt varje dag.

Kommentera