|
Gestaltung einer Tabelle - Trick's zum Umgang mit Tabellen |
|
Eine Tabelle besteht aus Tabellenzeilen, die wiederum aus einzelnen Tabellenspalten bestehen. Das Interessante daran ist, daß eine Spalte auch wieder eine Tabelle enthalten kann. Viele optisch gut gestaltete HTML-Seiten beruhen auf dieser Grundlage.
In dem nachfolgenden "Trickbeispiel" geht es darum, einige Bilder (es könnten auch Texte sein) möglichst gut auf der Ansichtsseite zu verteilen. In HTML ist nun aber eine exakte Positionierung von Bildern (Text) nicht ohne kleine Tricks möglich. - und ein solcher Trick besteht eben in einer Tabelle: Man stopft die Bilder in die einzelnen Zellen einer Tabelle und macht alle Linien unsichtbar! Ein weiterer Trick besteht darin, ein sogenanntes "einpixel.gif" als "Abstandhalter" zu verwenden. Das "einpixel.gif" ("1pix.gif") ist ein Bild, welches genau ein Pixel breit, ein Pixel hoch und zusätzlich transparent ist. Je nach Bedarf kann dieses Bild nun an jeder Stelle der HTML-Seite mit den Attributen "width" und "height" auf jede beliebige Größe gebracht werden.
<TABLE BORDER=1>
<TR><TD ALIGN=MIDDLE>
<IMG SRC="470.gif" WIDTH=400 HEIGHT=100></TD></TR>
<TR><TD>
<TABLE BORDER=1><TR>
<TD WIDTH=60 ALIGN=MIDDLE>
<IMG SRC="471.gif" WIDTH=50 HEIGHT=30><BR>
<IMG SRC="470.gif" WIDTH=50 HEIGHT=30><P>
<IMG SRC="471.gif" WIDTH=50 HEIGHT=30><BR>
<IMG SRC="470.gif" WIDTH=50 HEIGHT=30><BR>
<IMG SRC="471.gif" WIDTH=50 HEIGHT=30><BR>
<IMG SRC="470.gif" WIDTH=50 HEIGHT=30><BR>
</TD>
<TD>
<TABLE BORDER=1 WIDTH=400><TR><TD ALIGN=CENTER>
<IMG SRC="471.gif" WIDTH=60 HEIGHT=80 ALIGN=TOP>
<IMG SRC="1pix.gif" WIDTH=20 HEIGHT=1 ALIGN=TOP>
<IMG SRC="470.gif" WIDTH=200 HEIGHT=40 ALIGN=TOP>
<IMG SRC="1pix.gif" WIDTH=20 HEIGHT=1 ALIGN=TOP>
<IMG SRC="471.gif" WIDTH=60 HEIGHT=80 ALIGN=TOP>
</TD></TR></TABLE>
<TABLE BORDER=1 WIDTH=400><TR><TD ALIGN=CENTER>
<IMG SRC="471.gif" WIDTH=80 HEIGHT=80 ALIGN=TOP>
<IMG SRC="1pix.gif" WIDTH=20 HEIGHT=1 ALIGN=TOP>
<IMG SRC="471.gif" WIDTH=80 HEIGHT=80 ALIGN=TOP>
<IMG SRC="1pix.gif" WIDTH=20 HEIGHT=1 ALIGN=TOP>
<IMG SRC="471.gif" WIDTH=80 HEIGHT=80 ALIGN=TOP>
<IMG SRC="1pix.gif" WIDTH=20 HEIGHT=1 ALIGN=TOP>
<IMG SRC="471.gif" WIDTH=80 HEIGHT=80 ALIGN=TOP>
</TD></TR></TABLE>
</TD>
</TR></TABLE>
<TD></TR>
</TABLE>
|
|
Hinweis:
Der eigentliche Trick dieses Beispiels besteht darin, daß es selbst in weiteren Tabellen dargestellt ist. (Alle sichtbaren Linien dienen nur der besseren Orientierung.) |
