HTML-Dateien selbst erstellen Dokumentation: HTML Tabellen

Tips zum Umgang mit blinden Tabellen

 Mehrspaltigkeit
 Text und Grafik
 Seitenränder erzwingen
 Farbflächen

Wenn Sie bei WWW-Seiten auf 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.

Einen Nachteil sollten Sie jedoch beachten, wenn Sie beabsichtigen, den gesamten anzuzeigenden Inhalt einer WWW-Seite mit Hilfe einer blinden Tabelle anzuordnen: Tabellen werden vom WWW-Browser erst angezeigt, nachdem ihr kompletter Inhalt eingelesen wurde bzw. erst in dem Augenblick, wo der WWW-Browser genau weiß, wie groß und wie breit die Tabelle angezeigt werden muß. Das bedeutet bei der Datenübertragung aus dem WWW, daß ein Anwender am Bildschirm länger wartet, bis überhaupt etwas angezeigt wird.

Alternativen zu blinden Tabellen sind  Frames und neuerdings auch  Layer.

Mehrspaltigkeit

Tabellen dienen nicht nur dazu, um tabellarische Information anzuzeigen. In HTML wie in anderen textverarbeitenden Systemen dienen Tabellen auch dazu, um einen "Mehrspaltensatz" am Bildschirm zu erzwingen.

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 valign=top>
      <td width=33%>
  Hier folgt der Text von Spalte 1
      </td>
      <td width=33%>
  Hier folgt der Text von Spalte 2
      </td>
      <td width=34%>
  Hier folgt der Text von Spalte 3
      </td>
    </tr>
  </table>

Erläuterung:

Da die Inhalte der Spalten unterschiedlich lang sein können, wird mit der Angabe valign=top im einleitenden Tag der Zeile (<tr>) erreicht, daß alle Inhalte obenbündig ausgerichtet werden.
(siehe auch  Ausrichtung oben, mittig und unten)

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.
(siehe auch  Zellen in einer Zeile spaltenweise verbinden)

Beachten Sie:

Text und Grafik

Mit Hilfe von blinden Tabellen können Sie mehrere Grafiken sauber nebeneinander plazieren und haben die Möglichkeit, darüber und darunter ebenso sauber Text zu plazieren.

Beispiel:

<table width=500 cellpadding=10>
  <tr align=center>
    <td><h3>Überschrift</h3><img src="grafik1.gif" width=70 height=76 border=0>
    <td><h3>Überschrift</h3><img src="grafik2.gif" width=66 height=76 border=0>
    <td><h3>Überschrift</h3><img src="grafik3.gif" width=81 height=76 border=0>
  </tr>
  <tr align=center valign=top>
    <td><Beschreibungstext>
    <td><Beschreibungstext>
    <td><Beschreibungstext>
  </tr>
</table>

Erläuterung:

Durch die Angabe cellpadding=10 wird sichergestellt, daß sich die Zelleninhalte bei größerem Inhalt nicht zu nahe kommen.
(siehe auch  Randabstand von Zelleninhalt zum Zellenrand).

Mit <tr align=center> werden alle Zellen der jeweiligen Zeile zentriert ausgerichtet. Da die Beschriebungstexte unterschiedlich lang sein können, wird mit der Angabe valign=top erreicht, daß sie alle obenbündig ausgerichtet werden,
(siehe auch  Ausrichtung links, zentriert und rechts und  Ausrichtung oben, mittig und unten).

Überschriften und Grafiken sind im obigen Beispiel zwar unmittelbar nebeneinander notiert. Da Überschriften aber einen eigenen Absatz erzeugen, wird die dahinterstehende Grafik bei der Anzeige unterhalb der Überschrift plaziert. Da der Zellinhalt zentriert ausgerichtet wird, steht die Überschrift sauber zentriert über der jeweiligen Grafik.
(siehe auch  Überschriften und  Grafiken einbinden).

Seitenränder erzwingen

Mit Hilfe einer blinden Tabelle können Sie mit einer einzigen Tabellenzelle Seitenränder erzwingen. Es gibt zwar einen mächtigeren HTML-Befehl zum  Definieren von Seitenrändern, doch dieser Befehl wird nur vom MS Internet Explorer interpretiert. Die hier vorgestellte Lösung ist dagegen kompatibel zu HTML 3.2.

Beispiel:

<div align=center>
<table width=70%>
  <tr>
    <td>
Hier folgt der eigentliche Inhalt	  
   </td>
  </tr>
</table>
</div>

Erläuterung:

Zwischen dem Abschnitts-Tag und seinem Gegenstück </div> wird eine Tabelle definiert, die nur eine Zeile mit einer Zelle enthält. In dieser Zelle steht der gesamte Inhalt, der mit Seitenrändern versehen wird. Die Seitenränder selbst werden erreicht durch die Angabe width=70% im einleitenden Tabellen-Tag. Da die Tabelle selbst zentriert ausgerichtet wird, entsteht so links und rechts je ein Seitenrand von 15%.
(siehe auch  Höhe und Breite der gesamten Tabelle erzwingen).

Farbflächen

Mit blinden und zugleich farbigen Tabellen können Sie einzelne Flächen farbig hinterlegen, ohne daß dies wie eine Tabelle wirkt. Sämtliche Beispiele in diesem Dokument, auch das folgende, basieren auf dieser Technik.

Beispiel:

<table bgcolor=#000066 cellpadding=20>
  <tr>
    <td>
<font color=#FFFFFF>Hier folgt der Inhalt - weiß auf dunkelblauem Grund</font>	  
   </td>
  </tr>
</table>

Erläuterung:

	Blättern:
Tabellenbeschriftung und Text neben Tabellen			Aufbau von Verweisen und Allgemeines

	HTML-Dateien selbst erstellen
		Dokumentation: HTML
			Tabellen

© 1997  Stefan Münz, s.muenz@euromail.com