 1) Tabellenrand außen (CSS)
|
|
Die Formatierung eines Tabellenrandes kann man auch mit HTML umsetzten, wird aber von den unterschiedlichen Browser(versionen) nicht einheitlich dargestellt. Heute formatiert man Tabellenränder mittels CSS. Die gängigen Browser beherrschen die richtige Auslegung solcher Anweisungen!
Auf dieser Seite werden einige Beispiele zum Thema Randformatierung dargestellt. Farbe, Breite und Rahmentyp (style) wird unterschieden, Varianten in der Notierung aufgezeigt.
Tabelle mit Außenrand - CSS-Inlineanweisung
Die CSS-Lösung für einen farbigen Tabellenrand ist recht simpel und kann für folgende Bereiche festgelegt werden:
|
- Rahmenbreite
- Ramentyp (style)
- Rahmenfarbe
|
Hier ein Beispiel mit einer CSS-Inlineanweisung für einen Rahmen. Die Anweisung steht im <table>-Tag und gilt deshalb nur für diese Tabelle.
<table style="border:1px solid #9E8DE3;" ... ><tr><td>
...
|
Tabelle mit Rand - CSS globale Definition
Im <head>-Bereich notiert gilt die Anweisung für alle Tabellen innerhalb des HTML-Dokuments
1) Die Kurzschreibweise - alle Ränder gleich
<style type="text/css">
<!--
table {
border:3px double #AFAFAF;
}
-->
</style>
|
2) unterschiedliche Strichstärken
Die Strichstärken der Seitenränder sind hier separat notiert und könnten dann unterschiedlich stark festgelegt werden.
<style type="text/css">
<!--
table {
border-color: #846ADD;
border-style: dotted;
border-top-width: 3px; */ Randbreite oben /*
border-right-width: 3px; */ Randbreite rechts /*
border-bottom-width: 3px; */ Randbreite unten /*
border-left-width: 3px; */ Randbreite links /*
}
-->
</style>
/* Kurzschreibform: (alle 4 Ränder gleich)*/
table {
border: 3px dotted #846ADD;
}
-->
</style>
|
3) unterschiedliche Rahmenfarben
Die Rahmenfarben der Seitenränder sind hier separat notiert und könnten dann unterschiedlich festgelegt werden.
<style type="text/css">
<!--
table {
border-style: dashed;
border-width: 1px;
border-top-color: #FF7300; */ Rahmenfarbe oben /*
border-right-color: #FF7300; */ Rahmenfarbe rechts /*
border-bottom-color: #FFA98B; */ Rahmenfarbe unten /*
border-left-color: #FFA98B; */ Rahmenfarbe links /*
}
-->
</style>
/* Kurzschreibform: (alle 4 Ränder gleich)*/
table {
border: 1px dashed #FF7300;
}
-->
</style>
|
4) unterschiedliche Rahmentypen (style)
Gilt für Rahmen mit 3D-Effekt: Aus dem eingetragenen Farbwert für den Tabellenrahmen errechnet der FF und der IE die Farbe für die 'beleuchtete' Seite und die Farbe für die Schattenseite auf seine eigenenwillige Art und Weise. Daher sind unterschiedliche Darstellungen in den Browsern nicht zu vermeiden!
Die Rahmentypen der Seitenränder sind hier separat notiert und könnten dann unterschiedlich festgelegt werden. Hier der Style 'groove'
<style type="text/css">
<!--
table {
border-color: #B3AAEC;
border-width: 6px;
border-top-style: groove; */ Rahmentyp oben /*
border-right-style: groove; */ Rahmentyp rechts /*
border-bottom-style: groove; */ Rahmentyp unten /*
border-left-style: groove; */ Rahmentyp links /*
}
/* Kurzschreibform: (alle 4 Ränder gleich)*/
table {
border: 6px groove #B3AAEC;
}
-->
</style>
|
border-styles:
groove = 3D-Effekt
ridge = 3D-Effekt
inset = 3D-Effekt
outset = 3D-Effekt
(nicht alle 3D Effekte sind geeignet für sehr helle Farben)
dotted = gepunktet
dashed = gestrichelt
solid = durchgezogen
double = doppelt durchgezogen
 2) Zellenrandformatierung mit CSS
3) Tabellen + Zellenrand mit CSS
Darstellungsprobleme durch 'whitespaces'
Tabellen-Attribute
anschauliche Beispiele für Rahmentypen mit CSS
Randfarbe für Images mit CSS gestalten
Problemlösung Tabellenrand mit HTML
|
HOME
ZURÜCK