Ändern der Hintergrundfarben von Tabellen und Zellen im HTML
Nachdem Sie Ihre Grundtabellen mit Querspalten, Kopfzeilen und Daten gestaltet haben, können Sie ihr Aussehen verbessern. Sie können zum Beispiel Farben in Rahmen und Zellen einfügen, und Ihre Tabelle sieht schon viel schicker aus.
Um die Hintergrundfarbe einer Tabelle, Zeile oder Zelle innerhalb einer Zeile zu verändern, wenden Sie das Attribut bgcolor am jeweiligen Tag an, also an <table>, <tr>, <th> oder <td>. So wie bei <body> wird der Wert von bgcolor durch eine Farbe bestimmt, die entweder als drei hexadezimal Zahlen oder in vielen Browsern, darunter der Safari und der Chrome, mit einem der Farbnamen bezeichnet wird:
Black (Schwarz), Green (Grün), Maroon (Kastanienbraun), Olive (Olivgrün), Navy (Marineblau), Purple (Violett), Gray (Grau), Red (Rot), Yellow (Gelb), Blue (Blau), Lime (Zitronengelb), Aqua (Blaugrün), Fuchsia (Fuchsie) oder Silver (Silber). Das bgcolor-Attribut ist inzwischen Teil der Vorschläge für die HTML-4.0-Spezifikation, wurde aber zugunsten der Style Sheets verworfen.
Jede Hintergrundfarbe verdrängt die Hintergrundfarbe des umliegenden Elements.
Beispielsweise verdrängt ein Tabellenhintergrund den Seitenhintergrund, ein Zeilenhintergrund verdrängt den Tabellenhintergrund, und eine Zellfarbe verdrängt alle anderen Farben. Wenn Sie eine Tabelle innerhalb einer Zelle verschachteln, nimmt diese verschachtelte Tabelle die Hintergrundfarbe der umgebenden Zelle an.
Wenn Sie die Farbe einer Zelle ändern, sollten Sie ebenfalls die Farbe des sich darin befindlichen Textes ändern (mit <font color ... >), sodass er lesbar bleibt.
Wenn Sie möchten, dass Ihre Seiten mit Browsern, die ältere Versionen von Safari und Chrome sind, kompatibel sind, verwenden Sie <font color ... >. Verwenden Sie in Browsern, die Cascading Style Sheets unterstützen, die CSS color-Eigenschaft.
Damit die Hintergrundfarbe einer Tabellenzelle dargestellt wird, muss die Zelle irgendeinen Inhalt enthalten. Es reicht aus, einfach ein <br />-Tag in die leere Zelle zu stecken.
Hier folgt ein Beispiel, bei dem die Hintergrund- und Zellfarben innerhalb einer Tabelle verändert wurden.
Und zwar habe ich hier mit einer HTML-Tabelle ein kariertes Muster für ein Damebrett erzeugt. Die Tabelle selbst ist weiß und enthält abwechselnd schwarze Zellen. Die Damefiguren sind Abbildungen (hier: rote und schwarze Kreise).
Wenn Sie Bilder in Ihre Tabellen einfügen möchten, dann können Sie die weißen Spalten, die bei der Tabellenerstellung im Original – HTML-Code erscheinen, einfach ignorieren, da diese nicht in der fertigen Tabelle auftreten. Bei manchen Browser jedoch gibt es eine Ausnahme zu dieser Regel, und zwar dann, wenn Sie Bilder in Tabellenzellen einfügen. Nehmen wir an, Sie hätten Ihren Code mit dem <img>-Tag in einer separaten Zeile, wie im folgenden Beispiel, erstellt:
<td>
<img src="check.gif">
</td>
Bei diesem Stückchen Quelltext ist der Absatzumbruch zwischen dem <td>- Tag und dem <img>-Tag problematisch; Ihr Bild wird innerhalb der Zelle nicht korrekt platziert (dies äußert sich besonders in Zellen mit zentrierter Absatzausrichtung). Um dieses Problem zu korrigieren, platzieren Sie das <td> und das <img>-Tag in derselben Zeile, wie das im folgenden Code-Ausschnitt der Fall ist:
<td><img src="check.gif"></td>
Ich habe die Regel aus der vorhergehenden Bemerkung im folgenden Beispiel befolgt. Das Ergebnis sieht man in Abbildung.
<head>
<title>Ändern der Hintergrundfarben von Tabellen und Zellen im HTML</title>
</head>
<body>
<table bgcolor="#ffffff" width="50%">
<tr align="center">
<td bgcolor="#000000" width="33%"><img src="redcircle.png" alt="red circle" width="75" height="75"></td>
<td width="33%"><img src="redcircle.png" alt="red circle" width="75" height="75"></td>
<td bgcolor="#000000" width="33%"><img src="redcircle.png" alt="red circle" width="75" height="75"></td>
</tr>
<tr align="center">
<td><img src="blackcircle.png" alt="black circle" width="75" height="75"></td>
<td bgcolor="#000000">
<br />
</td>
<td><img src="blackcircle.png" alt="black circle" width="75" height="75"></td>
</tr>
<tr align="center">
<td bgcolor="#000000">
<br />
</td>
<td><img src="blackcircle.png" alt="black circle" width="75" height="75">
<br />
</td>
<td bgcolor="#000000">
<br />
</td>
</tr>
</table>
</body>
</html>
