HTML-Dateien selbst erstellen: Inhaltsverzeichnis


Umgang mit "blinden Tabellen"

 Mehrspaltigkeit durch blinde Tabellen
 Wichtige Tips bei Verwendung blinder Tabellen
 Farbflächen in blinden Tabellen


Mehrspaltigkeit durch blinde Tabellen

Tabellen dienen nicht nur dazu, um tabellarische Information anzuzeigen. In HTML dienen Tabellen auch dazu, um einen "Mehrspaltensatz" am Bildschirm zu erzwingen. Wenn Sie bei WWW-Seiten sauber ausgerichtete, aber relativ frei verteilte Elemente stoßen, wurde in vielen Fällen mit der Technik der "blinden Tabellen" gearbeitet. Blinde Tabellen haben keine sichtbaren Gitternetzlinien. Dadurch merkt der Betrachter gar nicht, daß es sich in Wirklichkeit um eine Tabelle handelt.

Mit Hilfe von blinden Tabellen können Sie beispielsweise:

Beachten Sie, daß Tabellen noch nicht von allen WWW-Browsern angezeigt werden. Bei Browsern, die keine Tabellen interpretieren, kann es zu unschönen und wirren Anzeigen am Bildschirm kommen. Da Tabellen aber längst zum de-facto-Standard von HTML gehören, ist ihr Einsatz mittlerweile durchaus zu vertreten.


 Seitenanfang


Wichtige Tips bei Verwendung blinder Tabellen

Um blinde Tabellen richtig einzusetzen, müssen Sie alle Zusatzangaben zum Ausrichten von Tabellenzellen und zum Verbinden von Tabellenzellen kennen. Die nötigen HTML-Angaben werden im Kapitel über  Tabellen beschrieben.

Text neben Grafiken anordnen

Wenn Sie beispielsweise links eine schmale Spalte mit Symbolen und rechts eine breite Spalte mit Text wollen, können Sie eine zweispaltige blinde Tabelle definieren:

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.

Seitenränder erzwingen

Mit Hilfe einer blinden Tabelle können Sie mit einer einzigen Tabellenzelle Seitenränder erzwingen:

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.

Mehrspaltigkeit im Zeitungsstil

Mit Hilfe etwa einer dreispaltigen blinden Tabelle können Sie einen attraktiv aussehenden 3spaltigen Textsatz im Stil einer Zeitung realisieren.

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.

In diesem Beispiel werden drei Spalten definiert, deren Breiten mit den Angaben width= 33%, 33% und 34% (= 100%) definiert werden. Innerhalb jeder der 3 Spalten können beliebige Elemente stehen. Grafiken, die zu breit sind, sprengen allerdings die erzwungenen Spaltenbreiten.

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.


 Seitenanfang


Farbflächen in blinden Tabellen

Mittlerweile ist es auch möglich, für ganze Tabellen oder einzelne Tabellenzellen eine belibiebige Hintergrundfarbe anzugeben. Bislang wird diese Möglichkeit nur vom Microsoft Internet Explorer ab Version 2.0 und von Netscape ab Version 3.0 interpretiert.

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