Tabellen: cellspacing und cellpadding

From Wiki

zurück zur Übersicht

So richtig schön sieht unsere Tabelle ja nun noch nicht aus. Aus diesem Grund legen wir nun den Abstand zwischen Zellenrahmen und -inhalt (cellpadding) und den Abstand der Zellen zueinander (cellspacing) fest.

Hinweis: Attribute, die die gesamte Tabelle betreffen, schreibt man direkt nach dem {|

Zunächst einmal vergrößern wir den Abstand zwischen den Zellen mit cellspacing="10":

{| border="1" cellspacing="10" cellpadding="0"
! width="10%" | Zelle 1 
! width="20%" | Zelle 2 
! width="40%" | Zelle 3
|-
|Zelle 4 
|Zelle 5 
|Zelle 6
|-
|Zelle 7 
|Zelle 8 
|Zelle 9 
|}

Das Ergebnis:

Zelle 1	Zelle 2	Zelle 3
Zelle 4	Zelle 5	Zelle 6
Zelle 7	Zelle 8	Zelle 9

Da uns auffällt, dass der Inhalt irgendwie sehr am Rand "hängt", vergrößern wir im Anschluss den Abstand zwischen Zellenrand und -inhalt, indem wir cellpadding="10" setzen:

{| border="1" cellspacing="10" cellpadding="10"
! width="10%" | Zelle 1 
! width="20%" | Zelle 2 
! width="40%" | Zelle 3
|-
|Zelle 4 
|Zelle 5 
|Zelle 6
|-
|Zelle 7 
|Zelle 8 
|Zelle 9 
|}

Das Ergebnis:

Zelle 1	Zelle 2	Zelle 3
Zelle 4	Zelle 5	Zelle 6
Zelle 7	Zelle 8	Zelle 9

Zum guten Schluss entscheiden wir uns aber doch für eine ganz dünne Linie um die einzelnen Zellen. Dazu setzen wir cellspacing="0" und schalten die dreidimensionale Wirkung des Rahmens mit style="border-collapse:collapse;" aus:

{| border="1" cellspacing="0" cellpadding="10" style="border-collapse: collapse;"
! width="10%" | Zelle 1 
! width="20%" | Zelle 2 
! width="40%" | Zelle 3
|-
|Zelle 4 
|Zelle 5 
|Zelle 6
|-
|Zelle 7 
|Zelle 8 
|Zelle 9 
|}

Das Ergebnis:

Zelle 1	Zelle 2	Zelle 3
Zelle 4	Zelle 5	Zelle 6
Zelle 7	Zelle 8	Zelle 9

zurück zur Übersicht