 Hintergrundgrafik in Tabellen / Tabellenzellen
Hintergrundgrafiken für Tabellen und Tabellenzellen. Hier lesen sie Grundsätzliches zur Einbindung mit HTML-Anweisungen oder mit CSS. Der Einsaz von Hintergundgrafiken kann zu rein dekorativen Zwecken eingesetzt werden aber auch praktischen Nutzwert haben.
|
|
» Tabellen- und Tabellenzellen-Hintergrundgrafiken «
Weiter unten auf dieser Seite behandle ich das Thema der fehlerhaften Darstellung von Hintergrundgrafiken in älteren Browsern.  Tabellen-Hintergrundbild Probleme
Gleich hier zwei Anschaungsbeispiele für den Einsatz von Hintergrundgrafiken für Tabellen:
Text im Vordergrund
auf weißem Hintergrund
über schraffierter
Hintergrundgrafik
|
Hintergrundgrafik schraffiert
|
Hintergrundgrafik transparent
|
a) Links sehen sie eine Demo mit schraffierter Hintergrundgrafik für eine Tabellenzelle. Da der eigentliche Inhalt mit einem Padding von 15 Pixeln auf einem weißen Hintergrund gezeigt wird, erscheint die Hintergrundgrafik wie ein 15 Pixel schraffierter Rand. Der Text ist Inhalt der Tabellenzelle. Der Tabellenrand wird orange dargestellt.
b) Rechts sehen sie eine Demo mit Hintergrundgrafik für eine Tabellenzelle. Der Text ist Inhalt der Tabellenzelle. Der Tabellenrand wird orange dargestellt.
Das Thema Hintergrundgrafiken als Tabellen- und Seitenhintergrund behandle ich auf separaten Beispielseiten. Dort lesen sie auch Grundsätzliches zur Einbindung mit CSS und Grundlagen zur unterschiedlichen Positionierung.
Querverweise zum Thema Hintergrundgrafik:
Übersicht: Anweisungen für Hintergrundgrafiken
Hier nur als kurze Übersicht und ohne großartige Erklärung den Syntax der Notierungen
1 Das HTML-Attribut für ein Hintergrundbild einer Tabelle sieht üblicherweise so aus:
<table background="../bild.gif" ... >
Dabei wird in den neuen Browsern die Grafik so dargestellt, dass sie in der linken oberen Ecke positioniert angezeigt wird. Ist die Grafik kleiner als die Tabelle, wird die Grafik 'gekachelt'. Das bedeutet, sie wird neben- und untereinander immer wieder angezeigt um den Tabellenhintergrund zu füllen. Mehr Info dazu und eine Demo finden sie auf der oben erwähnten Seite.
2 Das HTML-Attribut für ein Hintergrundbild einer Tabellezelle sieht üblicherweise so aus:
<td background="../images/bild.jpg" ... >
Die Darstellung erfolgt in dieser Tabellenzelle nach den gleichen Reglen wie im Bsp. 1.
3 Tabellen-Hintergrundbild mit CSS (inline)
Sie können die CSS-Anweisung zur Einbindung inline (innerhalb des <table>-Tags) mit dem Attribut 'style' einbinden. Die Eigenschaften stehen innerhalb der Anführungszeichen.
<table style="background:url(grafik.gif)" ...
4 Tabellenzellen-Hintergrundbild mit CSS (inline)
Sie können die CSS-Anweisung zur Einbindung inline (innerhalb des <td>-Tags) mit dem Attribut 'style' einbinden. Die Eigenschaften stehen innerhalb der Anführungszeichen.
<td style="background:url(grafik.gif)" ...
5 Hintergrundbild für Tabellen und Tabellenzellen mit CSS, globale Definition im HEAD
Anweisungen für Hintergrundgrafiken können sie im Gegensatz zur inline-Einbindung auch global festlegen. Sie entscheiden, ob diese Anweisung für alle Tabellen (der Seite) gelten soll oder durch Definition von Unterklassen nur für bestimmte Tabellen / Tabellenzellen gültig ist.
Im HEAD-Bereich ihrer Datei (oder in einer exterenen CSS-Datei)
/* für alle Tabellen */
table
{
background: url(grafik01.gif) #FFD7EA ;
background-position: top left;
background-repeat: repeat;
}
/* für alle Tabellenzellen */
td
{
background: url(grafik02.gif) #FFD7EA ;
background-position: top left;
background-repeat: repeat;
}
/* für Tabellen der Klasse 'hintergrund01' */
table .hintergrund01
{
background: url(grafik03.gif) #FFD7EA ;
background-position: bottom right;
background-repeat: repeat;
}
/* für Tabellenzellen der Klasse 'hintergrund02' */
td .hintergrund02
{
background: url(grafik04.gif) #FFD7EA ;
background-position: bottom right;
background-repeat: no-repeat;
}
Das class-Attribut im HTML-Tag (hier als Beispiel für eine Tabellenzelle):
<td class="hintergrund02" ...
Mehr Informationen und Demos zu den unterschiedlichen Anweisungen (Farbwerte, Position, repeat) zur Einbindung von Hintergrundgrafiken mit CSS finden sie auf den Seiten
 Hintergrundbild einfuegen - allgemeines
Hintergrundbild kacheln
Seiten-Hintergrundbild einfuegen
Fehlerhafte Darstellung für NS4
 DOWNLOAD  BEISPIEL
Tabellen-Hintergrundbild Probleme in älteren Browsern
Grafik-Hintergründe in Netscape-Tabellen sind ein Problem eine Herausforderung! Anders als im Explorer beginnt NS 4.x nämlich in jeder Tabellenzelle aufs neue, das Image darzustellen.
Im NS4.x würde das dann so aussehen (Bild muss geladen sein)
 |
Zelle 2 |
Zelle 3 |
Zelle 4 |
|
Zelle 6 |
Zelle 7 |
Zelle 8 |
|
Zelle 10 |
Zelle 11 |
Zelle 12 |
|
Zelle 14 |
Zelle 15 |
Zelle 16 |
Die Lösung
Die eigentliche Tabelle wird in eine 2. äußere Tabelle gesteckt die lediglich eine Zelle hat. Das Hintegrundbild wird nicht in der Inneren Tabelle sondern in der (einzigen) Zelle der äußeren Tabelle definiert. Für die innere Tabelle bestimme ich als Hintergrund ein transparentes Image (das kann Netscape 4.x meinethalben in jeder Zelle wiederholen).
 Lösungsbeispiel 1 gekachelt Lösungsbeispiel 2 passend
 Das funktioniert auch bis auf eine Ausnahme!
Für weitere Info unten mehr aber erst einmal den Quellcode. |
|
|
Home • Tabellen • Bilder • CSS • Hintergrundbild Tabelle