brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Edle Tabellen erklärt

von Thomas Salvador.

Was alt ist, ist ja nicht notwendig schlecht. Dies zeigt z.B. der in diesem Artikel vorgestellte Effekt, dessen Geschichte bis in das Jahr 1997 zurückreicht und von mir erstmals in [1] beschrieben wurde. 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

Auch jetzt noch ist etwas Ähnliches für Gastbeiträge im Einsatz:

Möchten auch Sie einen kürzeren oder längeren Artikel im WebDesign-Newsletter veröffentlichen?
Gerne höre und sehe ich mir Ihre Vorschläge an. Senden Sie sie doch bitte an salvador@brauchbar.de.

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:

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

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.

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

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.

<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>
eins zwei drei

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.

<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>
INHALT

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:

<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>
INHALT

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

INHALT

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.

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


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 23. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/67.html .