 Zellenrand mit CSS + cellspacing
Thema: Tabellen- und Zellenränder formatieren mit CSS. Hier beschreibe ich ganz kurz, welche unterschiedliche Darstellungen in Browsern auftreten können.
unterschiedliche Darstellung mit 'cellspacing'
Eine CSS-Notierung im Head für eine Tabelle mit der id 'rand03' erzeugt diese Darstellung der Tabelle, wenn für cellspacing der Wert '0' eingetragen ist:
| Marke |
Brand |
Preis |
| OnKühl |
ArabicBlack |
€ 2,80 |
| TschiBus |
Browny |
€ 2,80 |
| JaKorb |
DarkRost |
€ 2,80 |
CSS-Notierung im Head:
<style type="text/css">
<!--
#rand03 {
border-collapse: collapse;
border: 1px solid #9E8DE3;
}
#rand03 td, #rand03 th {
border: 1px solid #9E8DE3;
}
-->
</style>
Sobald aber für die Tabelle im Attribut cellspacing nicht der Wert '0' eingetragen ist, ändert sich die Darstellung!
Wird z.B. der Wert '5' eingetragen, stellt sich die Tabelle in den einzelnen Bowsern unterschiedlich dar. Ganz im Gegensatz zu einer Inline-Formatierung, bei der die Formatangaben in jede Tabellenzelle geschrieben werden. Links sehen sie jewils die Tabelle mit einer globalen, rechts die Tabelle mit Inline-Formatierung.
Die Inline-Anweisung in den HTML-Tags der rechten Tabellen ist:
<td style="border: 1px solid #9E8DE3" ...
Anmerkung zum äußeren Rand
Man macht sich erst einmal keine Gedanken wenn man diese Notierung sieht:
<table style="border:4px double #CFCFCF" ...
Rein rechnerisch bleibt aber bei einer Angabe von nur 4 Pixeln keine Möglichkeit für einen geleichmäßig dargestellten doppelten Rand gleicher Strichstärke. Halbe Pixelsträken sind ja nicht darstellbar. Das die beiden Strichstärken für den doppelten Rand unterschiedlich breit sind, ist hier so gewollt!
Bei nur 4 Pixeln Breite wird mit der Einstellung 'double' der Randbereich vom Browser IE so aufgeteilt, dass der äußere Rand 2, der innere aber nur 1 Pixel stark ist. Eine recht nette Erscheinung, finde ich.
- 2 Pixel Außenrand
- 1 Pixel Zwischenraum
- 1 Pixel Innenrand
| Randformatierung: style="border:4px double #CFCFCF" |
| Randformatierung: style="border:7px double #F0E1FF" |
Wenn der Wert für die Randbreite nicht ohne Rest durch 3 teilbar sind, ist das Erscheinugsbild bei den Browsern unterschiedlich.
 1) Tabellenrand formatieren (außen) mit CSS
2) Tabellen- und Zellenrandformatierung mit CSS
3) Zellenrandformatierung mit CSS
Darstellungsprobleme durch 'whitespaces'
Tabellen - Einführung und Grundgerüst
Tabellen-Attribute
Erstellt: 24.03.2006
|
HOME
ZURÜCK