border-style - Tabellen und Zellenrand
    
 HomeCSS • Tabellen- + Zellenrand CSS-Code

 2) Tabellenrand / Zellenrand

Themenseite: 01 02 03 04

Die Formatierung eines Tabellenrandes (außen) habe ich bereits behandelt. Hier geht es nun darum, nicht nur den Außenrand mit CSS festzulegen, sondern jede Zelle soll einen formatierten Rand haben.
Tabellen- und Zellenrand formatieren

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:

Die CSS-Lösung: Für einen farbigen Tabellen- und Zellenrand können folgende Eigenschaften festgelegt werden:

 Rahmenbreite
 Ramentyp (style)
 Rahmenfarbe

  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.

Kaffeemarken
Marke Sorte Preis
OnKühl ArabicBlack € 2,80
TschiBus Browny € 2,80
JaKorb DarkRost € 2,80
Kaffeemarken
Marke Sorte Preis
OnKühl ArabicBlack € 2,80
TschiBus Browny € 2,80
JaKorb DarkRost € 2,80



   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>


Kaffeemarken
Marke Sorte Preis
OnKühl ArabicBlack € 2,80
TschiBus Browny € 2,80
JaKorb DarkRost € 2,80



   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)

Kaffeemarken
Marke Sorte Preis
OnKühl ArabicBlack € 2,80
TschiBus Browny € 2,80
JaKorb DarkRost € 2,80
Kaffeemarken
Marke Sorte Preis
OnKühl ArabicBlack € 2,80
TschiBus Browny € 2,80
JaKorb DarkRost € 2,80



   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.

Kaffeemarken
Marke Sorte Preis
OnKühl ArabicBlack € 2,80
TschiBus Browny € 2,80
JaKorb DarkRost € 2,80
Kaffeemarken
Marke Sorte Preis
OnKühl ArabicBlack € 2,80
TschiBus Browny € 2,80
JaKorb DarkRost € 2,80


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.

Kaffeemarken
Marke Sorte Preis
OnKühl ArabicBlack € 2,80
TschiBus Browny € 2,80
JaKorb DarkRost € 2,80


<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.

Kaffeemarken
Marke Sorte Preis
OnKühl ArabicBlack € 2,80
TschiBus Browny € 2,80
JaKorb DarkRost € 2,80


<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.

Kaffeemarken
Marke Sorte Preis
OnKühl ArabicBlack € 2,80
TschiBus Browny € 2,80
JaKorb DarkRost € 2,80


<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 CSS

3) Tabellen + Zellenrand mit CSS

4) Problemlösung Tabellenrand mit HTML

Darstellungsprobleme durch 'whitespaces'

Tabellen-Attribute

anschauliche Beispiele für Rahmentypen mit CSS

Randfarbe für Images mit CSS gestalten







NACH OBEN