SELFHTML Forums-Auslese HTMLBasierend auf Forums-Beiträgen vom 15.08.1998 von:
Stefan Münz, muenz@csi.com
Peter Rampitsch, peter.rampitsch@young-world.com
Das folgende Beispiel zeigt, wie Sie mit Hilfe von Tabellen den Effekt eines Bilderrahmens erzielen. Im Beispiel wird die Aussage: "Dieser Text ist von Bildern umrahmt" von Grafiken umrandet. Jedes Bild befindet sich in jeder einzelnen Zelle der äußeren Spalten und Zeilen der Tabelle.
So soll die Tabelle aussehen:
S1: S2: S3: S4: S5: S6: S7: S8:
Z1: xxx xxx xxx xxx xxx xxx xxx xxx
GIF GIF GIF GIF GIF GIF GIF GIF
xxx xxx xxx xxx xxx xxx xxx xxx
Z2: xxx xxxxxxxxxxxxxxxxxxxxxxx xxx
GIF xxxxx Dieser Text xxxxx GIF
xxx xxxxxxxxxxxxxxxxxxxxxxx xxx
Z3: xxx xxx ist von Bildern xxx xxx
GIF xxxxxxxxxxxxxxxxxxxxxxx GIF
xxx xxxxxxx umrahmt xxxxxxx xxx
Z4: xxx xxxxxxxxxxxxxxxxxxxxxxx xxx
GIF xxxxxxxxxxxxxxxxxxxxxxx GIF
xxx xxxxxxxxxxxxxxxxxxxxxxx xxx
Z5: xxx xxx xxx xxx xxx xxx xxx xxx
GIF GIF GIF GIF GIF GIF GIF GIF
xxx xxx xxx xxx xxx xxx xxx xxx
Die Beispieltabelle besteht aus 5 Zeilen (Z1, Z2,...) und 8 Spalten (S1, S2,...). GIF steht für die eingesetzten Grafiken. Im mittleren Bereich (durch die "x" dargestellt) steht der Inhalt mit der oben zitierten Aussage. Diese wird im Quellcode in einer einzigen Zelle eingefügt, die mit den Attributen rowspan=3 (rowspan = Zeilen spannen) und colspan=6 (colspan = column span = Spalten spannen) definiert wurde.
Durch die Attributangaben border=0, cellspacing=0 und cellpadding=0 im <table>-Tag vermeiden Sie, wenn gewünscht, die Anzeige von Tabellenrand und Zellenzwischenräumen. Lesen Sie hierzu das Kapitel 
Rahmendicke, Gitternetzlinien, Randabstand in SELFHTML.
<html> <head> <title>Bildtabelle</title> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> <table border=0 cellspacing=0 cellpadding=0> <tr> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> </tr> <tr> <td><img src="icon.gif" width=32 height=32></td> <td rowspan=3 colspan=6><center><font size=-1>Inhalt dieser Tabelle<br> zum Beispiel Text<br> oder ein weiteres Bild</font></center></td> <td><img src="icon.gif" width=32 height=32></td> </tr> <tr> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> </tr> <tr> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> </tr> <tr> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> <td><img src="icon.gif" width=32 height=32></td> </tr> </table> </body> </html> |
 
|
Basierend auf einem Forums-Beitrag vom 11.08.1998 von:
Stefan Münz, muenz@csi.com
und einem Forums-Beitrag vom 12.08.1998 von:
Günter Laudenklos, eisbaer@purpurhain.de
Wenn die Inhalte der Tabellenzellen sehr unterschiedlich gewichtet sind, oder wenn Inhalte eine Spalte in der angegebenen Breite oder eine Zeile in der angegebenen Höhe nicht ausfüllen, kann es je nach Browser zu unschönen Darstellungen durch unterschiedliche Interpretationen der Attribute width=... und height=... im <table>- oder <td>-Tag kommen.
Mit dem Attribut cellspacing=... können Sie den Abstand zwischen den Tabellenzellen bestimmen. Das Problem einer Fehlinterpretation kleiner Höhenangaben für Zellen durch manchen Browser läßt sich auf diese Weise umgehen.
Eine weitere Möglichkeit ist es, mit einer Dummy-Grafik zu arbeiten (1x1 Pixel, transparent) und diese innerhalb der Zellen wie im folgenden Beispiel so groß zu machen, daß die gewünschte Zeilenhöhe oder Spaltenbreite erreicht wird. Bei Netscape geht das Gleiche auch ohne Grafik mit dem <spacer>-Tag, aber eben wieder nur bei Netscape.
<td><img src="dummy.gif" width=... height=...></td> |
Mit dem nützlichen Bildbetrachter 
Irfan View und mit anderen Bildbearbeitungsprogrammen können Sie solche 1-Pixel-Grafiken leicht erstellen.
|
|
Basierend auf einem Forums-Beitrag vom 18.08.1998 von:
Stefan Münz, muenz@csi.com
Beim Einsatz von Tabellen, die das gesamte Browserfenster oder ein ganzes Frame ausfüllen sollen, entsteht beim Verändern der Fenstergröße (resize) eine horizontale Bildlaufleiste, wenn die Tabellenbreite <table width=...> absolut, also in Pixeln, angegeben wurde (eine solche Scrolleiste entsteht immer dann, wenn der darzustellende Inhalt größer ist als das Programmfenster).
Durch eine relative (prozentuale) Breitenangabe, beispielsweise <table width=90%>, paßt sich die Tabellenbreite der jeweils neuen Fenstergröße an. Dies ist jedoch vom Inhalt der Tabelle abhängig!
|
|
Basierend auf Forums-Beiträgen vom 04.09.1998 von:
Thomas Mell, mell@becomsys.de
pam, pdo@germanlloyd.org
Um Elemente Ihrer Webseite (eine Textzeile, eine Grafik) unabhängig von Fenstergröße oder eingestellter Auflösung im unteren Seitenbereich zu positionieren, können Sie eine blinde Tabelle einsetzen: die Tabellenhöhe sollten Sie mit
<table height=100%>
relativ angeben. Die Zelle der letzten Tabellenzeile definieren Sie mit dem Attribut valign=bottom, so daß der Zelleninhalt am unteren Zellenrand ausgerichtet ist.
<table height=100% border=0> <tr> <td>Ihr Seiteninhalt...</td> </tr> <tr> <td>..der sich über mehrere...</td> </tr> <tr> <td>...Zeilen erstrecken darf!</td> </tr> <tr> <td valign=bottom>Hier das Element, das am unteren Rand plaziert werden soll</td> </tr> </table> |
Mit verschiedenen Angaben zur Tabellenhöhe erreichen Sie unterschiedliche Positionierungen des Elements.
Soll das Entstehen einer Bildlaufleiste verhindert werden, darf der Inhalt der oberen Zellen nicht zu umfangreich sein.
Bei diesem Beispiel handelt es sich nicht um die von Geocities ( http://www.geocities.com/) praktizierte Lösung für das Einblenden eines Wasserzeichen-Logos, welches auch beim Scrollen immer am unteren rechten Rand erscheint: hierfür ist ein kompliziertes JavaScript notwendig!
|
|
Basierend auf einem Forums-Beitrag vom 26.08.1998 von:
Günter Laudenklos, eisbaer@purpurhain.de
Trennlinien sind ein beliebtes und oft eingesetztes Mittel des Layoutdesigns. Mit dem Befehl <hr> erzeugen Sie eine horizontale Trennlinie, die Sie, wie in SELFHTML im Kapitel Trennlinien beschrieben, durch die Angabe verschiedener Attribute in Breite, Höhe, Form und Farbe variieren können.
Obwohl es für die vertikale Trennlinie noch keinen HTML-Befehl gibt, lassen sich senkrechte Linien mit Hilfe einer Tabelle dennoch erzeugen. Dabei definieren Sie die für die Trennlinie zuständige Zelle wie im folgenden Beispiel:
<td>Inhalt links von der vertikalen Linie</td> <td bgcolor="#ff0000" width=1><br></td> <td>Inhalt rechts von der vertikalen Linie</td> |
Die Angabe des <br>-Tags dient nur dazu, die Zelle zu "füllen", da manche Browser leere Tabellenzellen nicht darstellen können. Anstelle des <br>-Tags können Sie auch in diesem Fall wieder mit einer transparenten GIF-Grafik der Größe 1x1 Pixel arbeiten (vergleiche weiter oben).
Durch Einfügen zusätzlicher Tabellenzeilen können Sie die so erzeugte Trennlinie mehrfarbig gestalten: ändern Sie hierfür den unter bgcolor=... angegebenen Farbwert!
|
|
Basierend auf einem Beitrag von:
Patrick Andrieu, patrick.andrieu@okay.net
Die Attributangabe color=... im <hr>-Tag für horizontale Trennlinien wird von Netscape bis Version 4.5 nicht interpretiert. Mit Hilfe von Tabellen und einer Dummy-Grafik (1x1 Pixel, transparent, siehe weiter oben) können Sie jedoch auch mit Netscape farbige Trennlinien erzeugen:
<table width=50% cellspacing=0 cellspading=0 border=0> <tr> <td bgcolor="#ff0000" height=1><img src="dummy.gif"></td> </tr> </table> |
Mehrfarbige Trennlinien lassen sich durch einfaches Hinzufügen zusätzlicher Tabellenzellen in der gleichen Zeile erzeugen: ändern Sie hierfür lediglich den unter bgcolor=... angegebenen Farbwert! .
|
|
Basierend auf einem Forums-Beitrag vom 22.09.1998 von:
Thomas Hieck, hkt@gmx.net
Mit <table border="0" background="bild.gif"> definieren Sie eine Hintergrundgrafik für eine Tabelle. Netscape jedoch fängt das Bild in jeder Zelle neu an, es ensteht ein unschönes Kachelmuster. Mit folgender Konstruktion können Sie die Wiederholung des Hintergrundbilds vermeiden:
<table>
<tr>
<td background="bild.gif">
<table border="0" background="">
<tr>
<td>
Zelleninhalt
</td>
<td>
Zelleninhalt
</td>
</tr>
<tr>
<td>
Zelleninhalt
</td>
<td>
Zelleninhalt
</td>
</tr>
</table>
</td>
</tr>
</table>
|
Die Tabelle besteht aus einer einzigen Zelle, deren Hintergrundbild mit background="bild.gif" referenziert wurde. In dieser Zelle wurde eine neue Tabelle eingefügt, deren Zellen den tatsächlichen Inhalt wiedergeben. Hier wurde jedoch im <table>-Tag background="" angegeben, was die unerwünschte Bildkachelung verhindert.
|
|
Basierend auf Forums-Beiträgen vom 17.09.1998 von:
Stefan Münz, muenz@csi.com
Christopher Schröck, schroeck@eurolink.de
Peter Rampitsch, peter.rampitsch@young-world.de
Markus Schaber, markus.schaber@student.uni-ulm.de
Leere Tabellenzellen sind ein probates Mittel, um Inhalte voneinander zu trennen, farbige Balken oder Linien zu erzeugen. Leider werden soche "inhaltlosen" Zellen von manchen Browsern schlicht ignoriert und nicht dargestellt. Durch Einfügen eines erzwungenen Leerzeichens oder eines Zeilenumbruchs <br> läßt sich das Problem umgehen.
Alternativ können Sie, wie im Abschnitt Fehlinterpretationen der Angaben zur Tabellenbreite/-höhe vermeiden beschrieben, eine 1x1-Pixel-Grafik einstzen.
|
| |
weiter: |
Seitenlayouts mit Frames
|
zurück: |
Formatierung/Gestaltung von Elementen mit HTML-Attributen
|
das Redaktionsteam