| Zellenrand mit CSS |  |      |
|
|
 HOME |
 ZURÜCK SITEMAP |
Seite 3 zum Thema Tabellen- und Zellenränder formatieren mit CSS. Hier beschreibe ich ganz kurz, welchen optischen Einfluss cellspacing auf die Darstellung haben kann.
unterschiedliche Darstellung mit 'cellspacing' Eine CSS-Notierung im Head für eine Tabelle mit der id 'rand03' erzeugt diese Darstellunge der Tabelle, wenn für cellspacing der Wert '0' eingetragen ist:
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 mehr '0' eingetragen ist, ändert sich die Darstellung!
Wird z.B. der Wert '5' eingetragen wird stellt sich die Tabelle in den Bowsern unterschiedlich dar. Ganz im Gegensatz zu einer Inline-Formatierung, bei der die Formatangaben in jede Tabellenzelle geschrieben wurden. 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" ... Inline-Formatiergung des Zellenrandes Eine Inline-Formatiereung bringt neben der offenbar einheitlicheren Darstellung auch noch eine weitere Option: Die Anzeige / Darstellung der Zellenränder kann frei gewählt werden. Ein kurzes Beispiel für eine Inline-Formatierung von Tabellenzellen. Hier sollen die einzelnen Tabellenzellenränder unterschiedlich dargestellt werden. Die Randformatierung der Zellen wird besonders deutlich hervorgehoben durch einen Abstand der Zabellenzellen zueinander (ansonsten aber auch wenig sinnvoll). Der Abstand (Zwischenraum) wird hier erreicht mit dem Attribut für 'cellspacing="7"'. Nur so liegen die Zellränder auch weit genug auseinander, um sich nicht zu berühren, was eine unschöne Darstellung zur Folge haben würde.
Der Quellcode <table style="border:3px double #CFCFCF" cellspacing="7" cellpadding="5" width="400" border="0"> <tr><td colspan="4">Jahreszeiten</td></tr> <tr> <td align="center" style="border: 1px solid #9E8DE3">Frühling</td> <td align="center" style="border: 1px solid #2C6ED5">Sommer</td> <td align="center" style="border: 1px dotted #FF8450">Herbst</td> <td align="center" style="border: 1px dotted #00AD66">Winter</td> </tr> </table> Weiteres Beispiel mit anderen Farben Hier habe ich einmal Blautöne gewählt. Das Beispiel soll eine Variante, auch in der Anwendung, darstellen.
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. Das 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.
Das Erscheinugsbild ist bei den Browsern unterschiedlich, wenn die Werte für die Randbreite nicht ohne Rest durch 3 teilbar sind. 
 1) Tabellenrand formatieren (außen) mit CSS 2) Zellenrandformatierung mit CSS Darstellungsprobleme durch 'whitespaces' Tabellen - Einführung und Grundgerüst Tabellen-Attribute | |||||||||||||||||||||||||||||||||
|
3) Zellenrand mit CSS