| border-style - Tabellen und Zellenrand |  |      |
|
|
 HOME |
 CSS-Code  ZURÜCK SITEMAP |
Die Formatierung eines Tabellenrandes (außen) habe ich bereits behandelt. Hier geht es nun darum nicht nur den Außenrand mit CSS festzulegen. Auch jede Zelle soll einen formatierten Rand haben. Wie wärs alternativ mit einer einfachen waagerechten Linientrennung?
Kosmetik für ihre Webseite: Randformatierung für Tabellen mit Varianten in der Notierung. 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>
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 Tabellen, die im <table>-Tag eine id mit diesem id-Namen ausweisen. Beispiel Universalattribut #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', für die ein 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 doppelstrichgen 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 waagerechte Linie Beispiel 1 Ausschließlich die Anweisungen für die unteren Ränder (border-bottom) sind hier notiert und erzeugen eine horizontale Linie.
<style type="text/css">
<!--
#RandUnten {
border-collapse: collapse;
border-bottom: 1px solid #FF8450;
}
#RandUnten td, #RandUnten th {
border-bottom: 1px solid #FF8450;
}
-->
</style>
Beispiel 2 Auch hier sind nur die Randformatierungen für die Ränder unten (border-bottom) notiert und erzeugen eine horizontale Linie. Unterschied: Strichstärken
<style type="text/css">
<!--
#rand06 {
border-collapse: collapse;
border-bottom: 1px solid #FF8450;
}
#rand06 td {
border-bottom: 1px solid #FF8450;
}
#rand06 th {
border-bottom: 2px solid #FF8450;
}
-->
</style>
  1) Tabellenrandformatierung (außen) 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 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
2) Tabellenrand + Zellenrand
Die CSS-Lösung für einen farbigen Tabellenrand + Zellenrand kann für folgende Bereiche festgelegt werden: