| border-style - Tabellen und Zellenrand |  |      |
|
 Home • CSS • Tabellen- + Zellenrand |
 CSS-Code
|
Kosmetik für ihre Webseite: Randformatierung für Tabellen mit Varianten in der CSS-Notierung. Wie wärs alternativ mit einer einfachen Trennung durch eine waagerechte Linie? Von der Beispielseite 01, wo lediglich der Außenrand der Tabellen mit CSS formatiert wurde wissen Sie:
Das kennen Sie bereits: Tabelle mit Außenrand CSS-Inlineanweisung für den Tabellenrand außen, wie in der Ansicht links unten. Die Anweisung steht im <table>-Tag und gilt deshalb nur für diese Tabelle.
<table style="border:1px solid #9E8DE3;" border="0" ... ><tr><td>
Links sehen Sie eine Tabelle mit formatiertem Außenrand.Rechts ist eine Tabelle mit formatierten Zellrändern zu sehen. Daran arbeiten wir nun.
Globale Definition für alle Tabellen So wie bei der Tabelle rechts oben, sollen die Ränder angezeigt werden. Wenn alle Randformatierungen für die Tabellen der HTML-Seite gleich aussehen sollen, kann man die CSS-Anweisungen global (für alle gültig) im HEAD-Bereich der Datei so definieren: <style type="text/css"> <!-- table { border-collapse: collapse; } table td, table th { border: 1px solid #ABABCC; } --> </style> Definition über Universalattribut Möchten Sie für einzelne Tabellen unterschiedliche Formatierungen festlegen, empfehle ich die Vorgehensweise mit einer ID. Sie notieren eine (oder mehrere) Formatierungen, die über das Universalattribut id angesprochen werden sollen. Die gelten dann für die Tabelle, die im <table>-Tag die ID mit diesem Namen ausweisen. Möglich wäre auch die Definition einer eigenen Klasse (.rand) Beispiel: Universalattribut mit dem Identifikator '#rand' <style type="text/css"> <!-- #rand { border-collapse: collapse; } #rand td, #rand th { border: 1px solid #ABABCC; } --> </style>Im <table>-Tag der Tabelle wird die id notiert:
<table id="rand" border="0" ... ><tr><td>
Mehrere unterschiedliche Formate Nun können Sie weitere CSS-Notierungen für andersartige Randdarstellungen notieren. Das funktioniert solange Sie unterschiedliche Universalattribut-Namen verwenden. Links eine Tabelle mit der id 'rand03', rechts eine Tabelle mit der id 'rand04' und einem doppelstrichigen Außenrand. (Den Quellcode finden Sie in der Textdatei oben)
Kombination mit Inline-Anweisungen Auch Kombinationen der Zuweisung über id und Inlineanweisungen, z.B. für den Außenrand, sind möglich. Hier sehen Sie eine Tabelle mit dem id-Namen 'rand' und der Inline-Anweisung für einen doppelstrichigen Außenrand. Die Inline-Anweisung ist höherrangig und 'überschreibt' die im Head global angeordnete Anweisung für den 1 Pixel breiten Außenrand. Links eine Tabelle mit der id 'rand' und der Inline-Anweisung für einen doppelstrichgen Außenrand. Rechts eine Tabelle mit der id 'rand03' und der Inline-Anweisung für einen gepunkteten Außenrand.
So müssen Sie nicht unendlich viele unterschiedliche Formatierungen global festlegen und können von Fall zu Fall einzelne Tabellen mittels Inline-Anweisung hervorheben. Varianten Wenn Sie Varianten notieren möchten, um z.B. lediglich eine waagerechte Linie (oben oder unten) anzeigen zu lassen, bleibt noch die Option, die Darstellung der 4 Zellenränder einzeln festzulegen. Sie können unterschiedliche Strichstärken, Farben und Typen notieren. border-color: #ABABCC; border-style: solid; border-top-width: 0px; */ Randbreite oben /* border-right-width: 0px; */ Randbreite rechts /* border-bottom-width: 1px; */ Randbreite unten /* border-left-width: 0px; */ Randbreite links /* Beispiele - Kopiervorlagen Beispiel 'RandUnten' Ausschließlich die Anweisungen für die unteren Ränder (border-bottom) sind hier notiert und erzeugen eine horizontale Linie. Die Titelzeile wurde hervorgehoben.
<style type="text/css">
<!--
#RandUnten {
border-collapse: collapse;
border-bottom: 1px solid #FF8450;
}
#RandUnten td, #RandUnten th {
border-bottom: 1px solid #FF8450;
}
-->
</style>
Beispiel 'rand06' Hier sind außer für die Titelzeile die Randformatierungen für die Ränder unten (border-bottom) notiert und erzeugen eine horizontale Linie. Die Titelzeile wurde durch eine weiße Schrift auf dunklem Hintergrund hervorgehoben.
<style type="text/css">
<!--
#rand06 {
border-collapse: collapse;
border-bottom: 1px solid #0090E0;
}
#rand06 td {
border-bottom: 1px solid #0090E0;
}
#rand06 th {
font-family: Verdana, Arial, sans-serif;
font-size:11px;
background-color:#0090E0;
color:#FFFFFF;
font-weight:normal;
border-bottom:none;
}
-->
</style>
Beispiel 'rand07' Hier sind die Randformatierungen innen und Außen unterschiedlich formatiert. Die Innenränder in weiß kommen nur auf farbigem Hintergrund zur Geltung.
<style type="text/css">
<!--
#rand07 {
border: 1px solid #9000E0;
background-color:#EED5FF;
}
#rand07 td, #rand07 th {
border: 1px solid #FFFFFF;
font-family: Verdana, Arial, sans-serif;
font-size:11px;
font-weight:normal;
}
#rand07 th {
background-color:#C46AFF;
color:#FFFFFF;
}
-->
</style>
  1) Tabellenrandformatierung (außen) mit CSS3) Tabellen + Zellenrand mit CSS4) Problemlösung Tabellenrand mit HTMLDarstellungsprobleme durch 'whitespaces'Tabellen-Attributeanschauliche Beispiele für Rahmentypen mit CSSRandfarbe für Images mit CSS gestalten | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
2) Tabellenrand / Zellenrand
Die Formatierung eines Tabellenrandes (außen) habe ich bereits behandelt. Hier geht es nun darum, 
Die CSS-Lösung: Für einen farbigen Tabellen- und Zellenrand können folgende Eigenschaften festgelegt werden: