Tabellen mit halbtransparentem Hintergrund

von Thomas Salvador.

In diesem Artikel geht es einmal mehr um meine besonderen Lieblinge, HTML-Tabellen. Der hier vorgestellte Effekt ist nicht mehr der neuste. Er wurde April 1997 gebaut und einer Site verwendet. Eine erste Beschreibung findet sich in [1].

Die hier gelieferte ist eine technisch wesentlich verbesserte Version. Durch einen Trick wird eine Browsereigenart umschifft und der benötigte Code und Aufwand bei der Verwendung drastisch reduziert.

Worum geht es?

Ein passenderer Titel wäre "Tabellen mit Hintergründen, durch die der Seitenhintergrund farblich getönt hindurch scheint".

Huh?

Stellen Sie sich vor, Sie haben ein Hintergrundbild auf der Seite. Nun setzen Sie eine Tabelle davor. Ihr Hintergrund ist weder Blau, noch das Hintergrundbild der Seite, sondern der Hintergrund ist das bläulich getönte Hintergrundbild der Seite. Das sieht z.B. so aus:

Halbtransparente Tabelle im Einsatz

Feine Sache? Das will ich meinen. Beim Zoomen und Konvertieren sind zwar die Farben etwas kaputt gegangen. Um es nicht noch schlimmer zu machen, habe es unscharf gelassen. Das ist aber alles nicht so wichtig hier. Sie können klar erkennen, dass das "TS" ohne Versatz durch die Tabelle scheint. Den Rahmen der dortigen Tabelle könnte man ebensogut abschalten.

Wie geht es?

Sie brauchen ein geeignetes Hintergrundbild und ein paar Tabellen

Zunächst machen Sie Ihre Tabelle, die diesen Hintergrund bekommen soll, wie üblich.

Die im weiteren "Hintergrund-Tabelle" genannte Tabelle ist die, die den Hintergrund erzeugt. Es handelt sich um eine 1x1-Tabelle mit einem Hintergrundbild

<table cellpadding="0" cellspacing="0" border="0" background="hintergrund.gif">
  <tr><td>INHALT</td></tr>
</table>

Sie sehen, dass die Tabelle minimale Abstände hat und ein Hintergrundbild hintergrund.gif lädt. Anstelle von INHALT kopieren Sie jeweils Ihre komplette Tabelle.

Das Hintergrundbild

ist nun der Knackpunkt. Erzeugen Sie ein Hintergrundbild in einer hellen Farbe in der Form, dass Sie die Pixel schachbrettmusterartig setzen und nicht setzen:

P P P
 P P P     P = Farbiges Pixel des Tabellen-Hintergrundes
P P P
 P P P
P P P
 P P P

Beispiel, ein echtes Hintergrundbild ist größer, z.B. 32x32 oder 64x64

Sind Sie fertig, so speichern Sie das Bild im GIF-Format, wobei sie die ungesetzen Pixel auf transparent stellen. Im Endeffekt haben Sie damit ein Bild, welches abwechselnd durchsichtig und farbig ist.

Diese Beispiele können Sie downloaden:

blau grau grün rot gelb
blau
grau
grün
rot
gelb
Die Hintergründe auf weißem Untergrund

blau grau grün rot gelb
blau
grau
grün
rot
gelb
Die Hintergründe auf schwarzem Untergrund

Was passiert nun?

Bei der Betrachtung passiert dreierlei.

  1. Das Hintergrundbild zieht sich über die gesamte Hintergrund-Tabelle und dies ohne weiteres tun zu müssen perfekt, da die Tabelle nur aus einer Zelle besteht.
  2. An den transparenten Stellen dieses Bildes, scheint das Hintergrundbild der Seite durch, an den nicht-transparenten Stellen erscheint die Farbe des Hintergrundbildes.
  3. AAAAAA          P P P        PAPAPA      P = Farbiges Pixel des
    AAAAAA           P P P       APAPAP          Tabellen-Hintergrundes
    AAAAAA          P P P        PAPAPA      A = Pixel des Hintergrundbildes
    AAAAAA           P P P       APAPAP          der Webseite
    AAAAAA          P P P        PAPAPA
    AAAAAA           P P P       APAPAP
    AAAAAA          P P P        PAPAPA
    
  4. Die verkapselte Tabelle in der Zelle einscheint "vor" der Hintergrund-Tabelle. Da sie selbst kein Hintergrundbild und keine Hintergrundfarbe hat, beeinflusst sie nichts.

Und die Tönung?

Die Tönung rührt von der (schlechten) Auflösung menschlicher Augen her. Die beiden schachbrettmusterartig vermischen Bilder sind für diese nicht mehr trennbar. Und dies sogar bei geringer Bildschirmauflösung nicht. Natürlich sehen Sie es bei geringer Entfernung, nicht aber schon bei kürzeren Abständen, etwa normalem Sitzen vor einem Monitor.

Man sollte natürlich alles Probesehen, damit Bilder nicht kaputt gehen oder etwas unleserlich wird.

Ausdehnung der Tabellen

  • Wenn Sie Ihrer Tabelle keine feste Ausdehnung geben möchten, so gibt es nichts zu beachten, die Hintergrund-Tabelle wird sich Ihrer Tabelle anpassen.
  • Wenn Sie jedoch eine feste Ausdehnung benötigen, so setzen Sie diese in der Hintergrund-Tabelle und geben Ihrer Tabelle eine Breite von 100%. Dadurch deckt Ihre Tabelle den Hintergrund voll ab, den Sie auf die gewünschte Breite gestellt haben.

Komplettbeispiel

Betrachten wir anschließend noch ein vollständiges Beispiel, mit kompletten Source und Kommentaren insbesondere noch mal zur Ausdehnung.

Ausgabe

Source

<div align="center">
<table cellpadding="0" width="300" cellspacing="0" border="0" background="/images/tabbacky.gif">
<tr><td>
<!-- INNENLIEGENGE TABELLE BEGINN -->
<table width="100%" border="1" cellspacing="0"><tr><td>
<span class="f4">&nbsp;-&nbsp;<a href="https://brauchbar.de/artikel/html/...">Zum Artikel</a><br>
&nbsp;-&nbsp;<a href="https://brauchbar.de/artikel/html/">Zu den HTML-Artikeln</a><br>
&nbsp;-&nbsp;<a href="https://brauchbar.de/">Zur Homepage</a><br></span>
<!-- INNENLIEGENGE TABELLE ENDE -->
</td></tr></table>
</td></tr>
</table>
</div>

Kommentare zum Source

  • width="300", die Ausdehnung Ihner Tabelle bestimmen Sie, wenn überhaupt, dann in der äußeren Hintergrund-Tabelle.
  • background="../images/tabbacky.gif", legt den Hintergrund der Hintergrund-Tabelle fest. Sie können rasch in mein Tabellentutorial schauen, um sich mit den Fähigkeiten von Tabellen in HTML vertraut zu machen.
  • width="100%", haben Sie der Hintergrund-Tabelle eine fixe Ausdehnung gegeben, so hat die innere Tabelle immer eine Breite von 100%, damit die Hintergrund-Tabelle vollständig überdeckt. Haben Sie jedoch der Hintergrund-Tabelle keine feste Ausdehnung gegeben, so lassen Sie die width-Angabe weg. Die Hintergrund-Tabelle wird sich dann der inneren größenmäßig anpassen. Probieren Sie es einfach aus, um sich das zu verdeutlichen.

[1] Thomas Salvador: "Tabellen mit halbtransparentem Hintergrund" Web-Master 3-4/98 S. 38.