Haarlinien Tabellen

Stört Sie auch der dicke Rahmen einer Tabelle? Wie sie haarfeine Tabellenrahmen erstellen erfahren Sie in diesem HTML – Trick.

Sie sehen schon blöd aus, die Rahmen einer normalen Tabelle.
Sie sind einfach viel zu dick und klobig.
Ein einfacher Trick macht aus zwei Tabellen eine mit einem hauchdünnen
Rahmen.

Die erste Tabelle hat die Rahmenfarbe als Hintergrundfarbe, in dem
Beispiel ist es als Hintergrundfarbe "Schwarz".

<table width="100" border="0" cellspacing="1"
cellpadding="0" bgcolor="#000000">
<tr>
<td>&nbsp; </td>
</tr>
</table>

Dieser Tabelle wird, wie Sie sehen im Attribut "cellspacing"
ein Wert gesetzt. Dieser bestimmt die Dicke des Rahmens, er ist
auf 1 Pixel gesetzt. Das Attribut gibt an, um wieviel Pixel der
Inhalt der jeweiligen Zelle vom Rahmen entfernt sein soll.
In die Zelle der Tabelle wird nun einfach eine andere Tabelle mit
einer Zelle eingeschrieben, diese hat dann einen Pixel Abstand zum
Rand, und der hauchdünne Rahmen ist da.

<table width="100" border="0" cellspacing="1"
cellpadding="0" bgcolor="#000000">
<tr>
<td>
<!– Innere Tabelle –>

<table width="100%" border="0" cellspacing="0"
cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>

Das Ergebnis lässt sich sehen, hier der Vergleich:

eine normale Tabelle

 

Eine Tabelle mit haarfeinen Rahmen

 

This entry was posted in HTML Tricks. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *