Wie wurde es gemacht?
Zuerst einmal ist das nichts Besonderes.
Die 5*5 Zellen große Tabelle enthält jeweils GIFs (3b.gif) als Hintergrundgrafik in der gewünschten Farbe. Das ist schnell gemacht, man muss lediglich genau auf das Layout ("rowspan" bzw. "colspan") innerhalb der Zellen achten.
Die beiden vertikalen Linien werden zusätzlich mit transparenten 1-Pixel GIFs (1pix.gif) aufgespannt.
Damit sich die Tabelle dem Inhalt anpassen kann, wird die Grafik als Hintergrund eingesetzt. Das klappt jedoch erst mit allen 4er Browsern oder Neueren. Wer sich daran stört, kann GIFs mit fixen Größen einsetzen, muss dann aber bei Änderungen am Inhalt nachbessern.
Den eigentlichen Inhalt nimmt dann eine zusätzliche Tabelle auf (im Quellcode blau gekennzeichnet), die auch aus verschiedenen Zellen bestehen und Hintergrundfarben aufnehmen kann.
Und hier der entsprechende HTML-Code
<table width=400 border=0 cellspacing=0 cellpadding=0 align="center">
<tr>
<td> </td>
<td rowspan=5 background="pics/3b.gif><img src="pics/1pix.gif"
width=1 height=15></td>
<td> </td>
<td rowspan=5 background="pics/3b.gif><img src="pics/1pix.gif"
width=1 height=15></td>
<td> </td>
</tr>
<tr>
<td><img src="pics/3b.gif" width=15 height=1></td>
<td><img src="pics/3b.gif" width=400 height=1></td>
<td><img src="pics/3b.gif" width=15 height=1></td>
</tr>
<tr>
<td> </td>
<td valign="top">
<table width=100% border=0 cellspacing=0 cellpadding=5
align="center" bgcolor="#F0F0FF">
<tr>
<td valign="top" width=50%>Tabelleninhalt<br>
und<br>noch<br>mehr<br>Tabelleninhalt</td>
<td valign="top"> </td>
<td valign="top" width=50%>Tabelleninhalt<br>
und<br>noch<br>mehr<br>Tabelleninhalt</td>
</tr></table></td>
<td> </td>
</tr>
<tr>
<td><img src="pics/3b.gif" width=15 height=1></td>
<td><img src="pics/3b.gif" width=400 height=1></td>
<td><img src="pics/3b.gif" width=15 height=1></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Das schöne an dieser Tabelle ist, dass sich die Haarlinien dynamisch an die entsprechenden Dimensionen der "Texttabelle" anpassen.
