Edle Tabellen erklärt

Gerade in letzter Zeit taucht er wieder auf. Bis zum letzten Umbau verwendete ich hier z.B. etwa folgendes für Programmbeispiele:

Beispiel
Beispiel
Beispiel

Für Gastbeiträge ist etwas Ähnliches im Einsatz:

Diese Tabellen haben etwas Besonderes.

Ihr Rahmen ist nämlich genau ein Pixel dick.

Dies ist besonders, weil es mit dem blanken table-Tag und den normalen Attributen nicht erreichbar ist.

Wie Sie wissen oder rasch im Tabellentutorial nachblättern können, steuert man die Dicke des Rahmens mit dem border-Attribut. Der minimale Wert für einen sichbaren Rahmen ist 1. Selbst wenn wir alle Register ziehen und cellspacing auf 0 setzen, erhalten wir damit höchstens:

<p>vorher</p>
<table border="1" cellspacing="0"><tr><td>
Wie dick ist die Umrandung?
</td></tr></table>
<p>nachher</p>

also

und damit eine zwei Pixel dicke Umrandung.

Konstruktion

Die Tabellen, die Sie zuerst gesehen haben, haben einen border="0", d.h. sie haben im Sinne von HTML überhaupt keinen Rahmen! Wie aber wurde er dann gemacht?

Mit Abständen! oder genauer: mit Abständen und Farbe.

Ausgangspunkt war die folgende Beobachtung, die ich Sie nun selbst machen lassen möchte. Achten Sie genau auf die Tabelle, die lediglich aus farbig hinterlegten Zellen besteht, damit man es besser sieht.

<p>vorher</p>
<table border="0"><tr>
  <td bgcolor="red">eins</td>
  <td bgcolor="red">zwei</td>
  <td bgcolor="red">drei</td>
</tr></table>
<p>nachher</p>

liefert

Sie bemerken, dass zwischen den Zellen ein weißer Strich ist. Das ist nicht border, das ist cellspacing, der den Abstand zwischen zwei Zellen regelt!

Die Striche sind natürlich weiß, weil meine Hintergrundfarbe weiß ist, sie schimmert dort durch. Setzen wir eine andere Hintergrundfarbe, so haben die Striche eine andere Farbe.

Wie würden Sie die Hintergrundfarbe nur für diese Tabelle ändern? Denken Sie etwas darüber nach und lesen Sie dann weiter.

Sie werden wahrscheinlich, wie auch ich es mache, die Tabelle komplett mit einer anderen Tabelle umschliessen, die eine Hintergrundfarbe hat. Das sieht z.B. so aus.

<p>vorher</p>
<table border="0" cellspacing="0" bgcolor="black"><tr><td>
  <table border="0"><tr>
    <td bgcolor="red">eins</td>
    <td bgcolor="red">zwei</td>
    <td bgcolor="red">drei</td>
  </tr></table>
</td></tr></table>
<p>nachher</p>

und liefert

Und schon die Striche nun schwarz. Ihnen wird sofort aufgefallen sein, dass die gesamte Tabelle von einem schwarzen Rahmen umzogen ist.

Aha!

Das muss cellpadding sein, der den Abstand des Zellenrandes vom Zelleninhalt regelt.

Alle Attribute sind im Tabellentutorial erläutert.

Der Rest ist nun wirklich einfach.

Durch geschickte Kostruktion bauen wir die Tabellen so, dass wir zum einen einen Ein-Pixel-Rahmen haben und zum anderen innen einen ansprechenden cellpadding, der Zellinhalt (hier "INHALT") also nicht zu eng am Rahmen ist.

<p>vorherher</p>
<table width="333" bgcolor="#000033" cellspacing="0" cellpadding="1" border="0">
<tr><td>
<table bgcolor="#ffffff" cellspacing="0" cellpadding="5" border="0" width="100%">
<tr><td><font face="arial, helvetica, sans-serif" size="-1">
INHALT
</font></td></tr></table>
</td></tr></table>
<p>nachher</p>

Und wir erhalten das erwartete Ergebnis

Zusatz und Parameter

Bitte beachten Sie, dass diese Konstruktion von sich aus noch einen zweiten 'Edel-Punkt' enthält. Ein so konstruierter Rahmen ist im Gegensatz zu den Standard-HTML-Rahmen ausgefüllt und einfarbig.

Die Rahmendicke steuert man mit cellpadding="dicke" der äußeren Tabelle, Die Rahmenfarbe mir dem bgcolor-Attribut der äußeren und die Hintergrundfarbe mit dem bgcolor-Attribut der inneren Tabelle:

<p>vorher</p>
<table width="333" bgcolor="#3300ff" cellspacing="0" cellpadding="3" border="0">
<tr><td>
<table bgcolor="#ffeeee" cellspacing="0" cellpadding="5" border="0" width="100%">
<tr><td><font face="arial, helvetica, sans-serif" size="-1">
INHALT
</font></td></tr></table>
</td></tr></table>
<p>nachher</p>

width kann und wird bei solchen Konstuktionen meistens angegeben, muss aber nicht. Obiges ohne width liefert:

Natürlich und das ist Edel-Punkt 3 kann man statt einer Rahmenfarbe auch ein Rahmenmuster verwenden. Ein geeignetes Bild vorausgesetzt, gibt das einen schönen Effekt.

<table width="333" background="BILDURL" cellspacing="0" cellpadding="3" border="0">
<tr><td>
<table bgcolor="#ffeeee" cellspacing="0" cellpadding="5" border="0" width="100%">
<tr><td><font face="arial, helvetica, sans-serif" size="-1">
INHALT
</font></td></tr></table>
</td></tr></table>

Kompatibilität

Die beiden verbreiteten Browser haben keine Probleme mit dem Effekt.

Lediglich braucht der Communicator einen Moment, wenn man mehrere dieser Rahmen ihrerseits zusammenfasst und somit sechs oder mehr Tabellen schachtelt.

Den IE stört das nicht weiter, er bremst nicht merklich ab. Das erzeugte Bild ist übrigens bei meinen Test-Seiten stets bei beiden gleich gewesen.

Der Effekt ist damit zumindest auf den verbreiteten Browsern so ziemlich sicher.

Freilich wurde es später mit Einführung von CSS viel einfacher.

[1] Thomas Salvador: "Edle Tabellen", S. 23, Web-Master 98/05