SELFHTML/Quickbar  HTML  Tabellen

Farbige Tabellen
Diese Seite ist ein Dokument mit Informationstext

 Hintergrundfarbe für gesamte Tabelle
 Hintergrundfarbe für Zeilen oder Zellen
 Farben für Rand und Gitternetzlinien
 Hintergrundbild (Wallpaper) für Tabelle oder Tabellenzellen
 

HTML4.0 Hintergrundfarbe für gesamte Tabelle

Beispiel Anzeigebeispiel: So sieht's aus

Sie können für alle Zellen einer Tabelle eine einheitliche Hintergundfarbe definieren.

Beispiel:

<table border bgcolor=#CCFFFF>
    <tr>
      <td>Zeile 1 Spalte 1 = hellblau</td>
      <td>Zeile 1 Spalte 2 = hellblau</td>
    </tr>
    <tr>
      <td>Zeile 2 Spalte 1 = hellblau</td>
      <td>Zeile 2 Spalte 2 = hellblau</td>
    </tr>
</table>

Erläuterung:

Durch das Attribut bgcolor= im einleitenden Tag der Tabelle können Sie eine Hintergrundfarbe für die gesamte Tabelle bestimmen (bgcolor = background color = Hintergrundfarbe). Beim Angeben der Farbe gelten die Regeln zum  Definieren von Farben in HTML.

Beachten Sie:

Wenn Sie eine Hintergrundfarbe definieren, sollten Sie für den Text eine geeignete Kontrastfarbe definieren. Falls Sie hierzu den HTML-Befehl zum Ändern von  Schriftfarben innerhalb des Textes verwenden wollen, müssen Sie diesen Befehl in jeder einzelnen Tabellenzelle erneut eingeben. Wesentlich besser ist es jedoch,  zentrale Style-Sheet-Formate für Tabellenzellen th und td zu definieren.

 

HTML4.0 Hintergrundfarbe für Zeilen oder Zellen

Beispiel Anzeigebeispiel: So sieht's aus

Sie können für eine Zeile oder eine einzelne Zelle innerhalb einer Tabelle eine Hintergrundfarbe definieren.

Beispiel:

<table border>
    <tr bgcolor=#CCFFFF>
      <td>Zeile 1 Spalte 1 = hellblau (gilt für Zeile)</td>
      <td>Zeile 1 Spalte 2 = hellblau (gilt für Zeile)</td>
    </tr>
    <tr bgcolor=#CCFFCC>
      <td bgcolor=#CCFFCC>Zeile 2 Spalte 1 = hellgrün (gilt für diese Zelle)</td>
      <td bgcolor=#FFCCFF>Zeile 2 Spalte 2 = hellviolett (gilt für diese Zelle)</td>
    </tr>
</table>

Erläuterung:

Durch das Attribut bgcolor= im einleitenden Tag einer Zeile (<tr>) können Sie eine Hintergrundfarbe für alle Zellen in dieser Zeile bestimmen (bgcolor = background color = Hintergrundfarbe). Wenn Sie bgcolor= im einleitenden Tag einer Datenzelle (<td>) oder einer Kopfzelle (<th>) angeben, gilt die Hintergrundfarbe für diese eine Zelle. Beim Angeben der Farbe gelten die Regeln zum  Definieren von Farben in HTML.

Beachten Sie:

Im Konfliktfall hat die Farbangabe in einzelnen Zellen Vorrang vor der Angabe für ganze Zeilen oder Tabellen. Die Angabe für eine Zeile hat im Konfliktfall Vorrang vor der Angabe für die ganze Tabelle.

 

MS IE2.0 Farben für Rand und Gitternetzlinien

Beispiel Anzeigebeispiel: So sieht's aus

Sie können auch für Rahmen und Gitternetzlinien Farbangaben machen. Diese Angaben werden bislang jedoch nur vom MS Internet Explorer interpretiert und gehören nicht zum HTML-Standard.

Beispiel 1:

<table border bgcolor=#CCFFFF bordercolor=#000099>
    <tr>
      <td>Zeile 1 Spalte 1 = hellblau, Rahmen und Gitternetz dunkelblau</td>
      <td>Zeile 1 Spalte 2 = hellblau, Rahmen und Gitternetz dunkelblau</td>
    </tr>
    <tr>
      <td>Zeile 2 Spalte 1 = hellblau, Rahmen und Gitternetz dunkelblau</td>
      <td>Zeile 2 Spalte 2 = hellblau, Rahmen und Gitternetz dunkelblau</td>
    </tr>
</table>

Beispiel 2:

<table border=4 bgcolor=#CCFFCC bordercolordark=#660000 bordercolorlight=#FF0000>
    <tr>
      <td>Zeile 1 Spalte 1 = hellgrün, Rahmen und Gitternetz dunkelrot/rot</td>
      <td>Zeile 1 Spalte 2 = hellgrün, Rahmen und Gitternetz dunkelrot/rot</td>
    </tr>
    <tr>
      <td>Zeile 2 Spalte 1 = hellgrün, Rahmen und Gitternetz dunkelrot/rot</td>
      <td>Zeile 2 Spalte 2 = hellgrün, Rahmen und Gitternetz dunkelrot/rot</td>
    </tr>
</table>

Erläuterung:

Durch das Attribut bordercolor= im einleitenden Tag der Tabelle können Sie eine einheitliche Farbe für den Tabellenrahmen und die Gitternetzlinien bestimmen (bordercolor = Randfarbe).

Anstelle der einfachen Rahmenfarbe können Sie auch einen Schattier-Effekt in den Rahmen bringen, indem Sie zwei verschiedene Farben definieren - eine dunklere und eine hellere. Dazu notieren Sie im einleitenden Tag der Tabelle die beiden Zusatzangaben bordercolordark= (bordercolordark = dunkle Randfarbe) und bordercolorlight= (bordercolorlight = helle Randfarbe).

 

MS IE3.0Netscape4.0 Hintergrundbild (Wallpaper) für Tabelle oder Tabellenzellen

Beispiel Anzeigebeispiel: So sieht's aus

Sie können für eine Tabelle ein eigenes Hintergrundmuster (Wallpaper) definieren. Das funktioniert genauso wie bei  Hintergrundbildern (Wallpapers) für den gesamten Dateikörper.

Hintergrundbilder für Tabellen gehören bislang nicht zum HTML-Sprachstandard. Deshalb ist es besser, zu diesem Zweck  CSS Style-Sheets zu verwenden (siehe  Weitere Möglichkeiten).

Beispiel:

<table border=4 background="datei.gif">
    <tr>
      <td background="datei2.gif">Zeile 1 Spalte 1</td>
      <td>Zeile 1 Spalte 2</td>
    </tr>
    <tr>
      <td background="datei2.gif">Zeile 2 Spalte 1</td>
      <td>Zeile 2 Spalte 2</td>
    </tr>
</table>

Erläuterung:

Durch das Attribut background= im einleitenden Tag der Tabelle können Sie ein Hintergrundbild für die gesamte Tabelle bestimmen (background = Hintergrund). Wenn Sie die Angabe im einleitenden Tag einer Tabellenzelle (<th> oder <td>)notieren, ist die Tabellenzelle der Bereich für das Hintergrundbild.

Beachten Sie:

Im Beispiel wird vorausgesetzt, daß sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim  Einbinden von Grafiken.

Netscape 4.x und MS Internet Explorer 4.x interpretieren auch  animierte GIF-Grafiken als Hintergrundbilder.


 
weiter: Tabellenbeschriftung und Tabellenausrichtung
zurück: Zellen verbinden
 

SELFHTML/Quickbar  HTML  Tabellen

© 1998  Stefan Münz, muenz@csi.com

1