Mit Hilfe von blinden Tabellen können Sie beispielsweise:
Beispiel
<table cellpadding=10> <tr> <td width=100 valign=top align=right> <img src="symbol01.gif"> </td> <td valign=top> Hier folgt der Text neben Symbol 1 </td> </tr> <tr> <td width=100 valign=top align=right> <img src="symbol02.gif"> </td> <td valign=top> Hier folgt der Text neben Symbol 2 </td> </tr> usw. </table>Ergebnis (nur für tabellenfähige Browser)
Symbol 1 (hat nichts mit dem folgenden Text zu tun...) Mit einer solchen Anordnung bewirken Sie, daß die Symbole rechtsbündig (align=right) hin zum Text ausgerichtet werden und unabhängig von der Länge des zugehörigen Textes obenbündig zum Text ausgerichtet werden (valign=top). Zwischen Symbolen und Text ist ein bestimmter fester Abstand gesichert (cellpadding=10). |
|
Symbol 2 (hat auch nichts mit dem folgenden Text zu tun...) Dadurch vermeiden Sie die Verwendung von Ausrichtungsbefehlen bei Grafiken, die bei verschiedenen WWW-Browsern oft ganz unterschiedlich Ergebnisse erzeugen. |
Beispiel
<center> <table width=70%> <tr> <td> Hier folgt der eigentliche Inhalt </td> </tr> </table> </center>Ergebnis (nur für tabellenfähige Browser)
Mit einer einzigen Tabellenzelle können Sie Seitenränder definieren. Auf diese Weise können Sie die Gesamtbreite der WWW-Seite besser kontrollieren. In diesem Beispiel wurde die gesamte Anzeigebreite der Tabelle auf 70% des Anzeigefensters (width=70%) begrenzt. Mit Hilfe von <center> ... </center> wird die gesamte Tabelle zentriert. Auf diese Weise ergeben sich rechts und links 15% Rand. Die eine Tabellenzelle kann beliebige Elemente enthalten, darunter Grafiken und auch weitere Tabellen! Denn was wenige wissen: Tabellen können ineinander verschachtelt werden, d.h. innerhalb einer Tabellenzelle kann eine komplette andere Tabelle definiert werden. |
Beispiel
<table cellpadding=5> <tr> <td width=33% valign=top> Hier folgt der Text von Spalte 1 </td> <td width=33% valign=top> Hier folgt der Text von Spalte 2 </td> <td width=34% valign=top> Hier folgt der Text von Spalte 3 </td> </tr> </table>Ergebnis (nur für tabellenfähige Browser)
Blinde Tabellen werden im Desktop Publishing (DTP) häufig eingesetzt, um die Anordnung von Text genau zu kontrollieren. Mit den Features der HTML-Tabellenfunktionen ist dies auch für Dokumente des World Wide Web möglich. | Mehrspaltensatz lockert die dargebotene Textinformation auf und sorgt für mehr Abwechselung am Bildschirm. Besonders für elektronische Magazine (e-zines) könnte dieses Feature interessant sein. | Auch bei der Plazierung von Bildern gewinnen Sie mit Hilfe von blinden Tabellen viel Freiheit. |
Achten Sie darauf, daß die Inhalte aller definierten Spalten ungefähr gleich lang sind und möglichst nicht mehr Inhalt enthalten, als ein Bildschirm bei 640 x 480 Pixeln Auflösung anzeigen kann. Denn sonst muß der Anwender dauernd scrollen. Falls Sie mehr Information unterbringen wollen, sollten Sie danach einfach eine neue Tabellenzeile mit den nächsten drei Zellen notieren. Falls Sie Zwischenüberschriften oder Trennlinien notieren wollen, die sich über alle drei Spalten erstrecken sollen, müssen Sie dafür ebenfalls eine eigene neue Tabellenzeile notieren. Statt drei Zellen notieren Sie dabei aber nur eine und erstrecken Sie mit der Zusatzangabe colspan=3 über alle drei Spalten.
Im Zusammenhang mit blinden Tabellen können Sie diese Möglichkeit nutzen, um einzelne Flächen der mehrspaltigen Information farblich unterschiedlich zu hinterlegen.
Beispiel
<table cellpadding=10> <tr> <td width=100 valign=top align=right> <img src="symbol01.gif"> </td> <td valign=top bgcolor=#FFFFCC> Hier folgt der Text neben Symbol 1 </td> </tr> <tr> <td width=100 valign=top align=right> <img src="symbol02.gif"> </td> <td valign=top bgcolor=#FFFFCC> Hier folgt der Text neben Symbol 2 </td> </tr> usw. </table>Ergebnis (nur für tabellenfähige Browser mit Möglichkeit, farbige Zellen anzuzeigen)
Symbol 1 (hat nichts mit dem folgenden Text zu tun...) Mit einer solchen Anordnung bewirken Sie, daß die Symbole rechtsbündig (align=right) hin zum Text ausgerichtet werden und unabhängig von der Länge des zugehörigen Textes obenbündig zum Text ausgerichtet werden (valign=top). Zwischen Symbolen und Text ist ein bestimmter fester Abstand gesichert (cellpadding=10). Dadurch vermeiden Sie die Verwendung von Ausrichtungsbefehlen bei Grafiken, die bei verschiedenen WWW-Browsern oft ganz unterschiedlich Ergebnisse erzeugen. |
|
Symbol 2 (hat auch nichts mit dem folgenden Text zu tun...) Der Text selber erscheint auf hellgelbem Hintergrund. Dies wird durch die Zusatzangabe bgcolor=#FFFFCC erreicht. Mehr Information zum Definieren von Farben in HTML finden Sie im Kapitel Farben definieren in HTML. |
HTML-Dateien selbst erstellen: Inhaltsverzeichnis
Seitenanfang
Blättern:
Umgang mit Frames |
Browser-Benutzungsstatistik
© 1996 Stefan Münz