SELFHTML/Quickbar  HTML  Tabellen


Tips zum Umgang mit blinden Tabellen

Diese Seite ist ein Dokument mit Informationstext

 Allgemeines zu blinden Tabellen
 Mehrspaltigkeit
 Text und Grafik
 Seitenränder erzwingen
 Farbflächen

 

Allgemeines zu blinden Tabellen

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. Es sei denn, Sie benutzen den Befehl, um  Spalten vorzudefinieren.

Einige Aufgaben, für die mit herkömmlichem HTML blinde Tabellen erforderlich waren, lassen sich mittlerweile auch mit Hilfe von  CSS Style-Sheets lösen. Das gilt beispielsweise für  Abstände und Ränder, für die  Hintergrundgestaltung einzelner Bereiche oder für das  Positionieren von Elementen.

 

HTML3.2 Mehrspaltigkeit

Beispiel Anzeigebeispiel: So sieht's aus

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:

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.
(siehe auch  Breite von Spalten erzwingen)

Da die Inhalte der Spalten unterschiedlich lang sein können, wird mit 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:

Zur Realisierung von Mehrspaltigkeit in HTML gibt es neben der Möglichkeit blinder Tabellen auch noch eine direkte Möglichkeit für  mehrspaltigen Textfluß, die aber nur von Netscape seit V3.0 interpretiert wird.

Daneben gibt es auch eine offizielle und standardisierte Variante, nämlich  Style-Sheet-Angaben zu mehrspaltigem Textfluß. Diese Angaben werden jedoch von Netscape und dem MS Internet Explorer auch in den 4er-Versionen noch nicht interpretiert.

 

HTML3.2 Text und Grafik

Beispiel Anzeigebeispiel: So sieht's aus

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:

In diesem Beispiel werden drei Spalten definiert. In der ersten Zeile sollen 3 Überschriften mit 3 dazugehörigen Grafiken unterhalb stehen, in der zweiten Zeile 3 passende Beschreibungstexte, wiederum unterhalb der jeweiligen Grafiken. Mit der Angabe width=500 wird eine Gesamtbreite der Tabelle erzwungen. Die Breite ist in Abstimmung mit der Summe der Breite aller Grafiken und dem Textumfang so gewählt, daß es optisch ordentlich aussieht.
(siehe auch  Höhe und Breite der gesamten Tabelle erzwingen).

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 horizontal und  Ausrichtung vertikal).

Ü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).

 

HTML3.2 Seitenränder erzwingen

Beispiel Anzeigebeispiel: So sieht's aus

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

Beispiel:

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

Erläuterung:

In diesem Beispiel wird zunächst mit <div align=center> ein zentriert ausgerichteter Bereich definiert.
(siehe auch  Bereich mit mehreren Elementen definieren).

Zwischen dem 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).

Beachten Sie:

Mittlerweile können Sie sich solche Wünsche auch mit Hilfe von  CSS Style-Sheets erfüllen. Geeignet dazu sind die Style-Sheet-Angaben zu  Abständen, Rändern und Ausrichtung.

 

HTML3.2 Farbflächen

Beispiel Anzeigebeispiel: So sieht's aus

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>
<div color=#FFFFFF>Hier folgt der Inhalt - weiß auf dunkelblauem Grund</font>	  
   </td>
  </tr>
</table>

Erläuterung:

In diesem Beispiel wird eine Tabelle mit einer einzigen Zelle definiert. Durch die Angabe bgcolor=#000066 wird der Tabelle ein dunkelblauer Hintergrund zugewiesen. Damit die Fläche den Text großzügig einrahmt, wird mit cellpadding=20 ein Randabstand definiert. Um den Text in der Zelle von dem dunklen Hintergrund abzuheben, wird mit <font color=#FFFFFF> eine kontrastierende Textfarbe (weiß) definiert.
(siehe auch  Farbige Tabellen,  Randabstand von Zelleninhalt zum Zellenrand und  Schriftfarben).

Beachten Sie:

Mittlerweile können Sie sich solche Wünsche auch mit Hilfe von  CSS Style-Sheets erfüllen. So können Sie beispielsweise einen Bereich mit <div>...</div> definieren und im einleitenden <div>-Tag Style-Angaben notieren. Geeignet sind die Style-Sheet-Angaben zur  Hintergrundfarbe, zur  Textfarbe und zum  Innenabstand.


 
weiter: Tabellen und nicht-visuelle Medien
zurück: Tabellenbeschriftung und Tabellenausrichtung
 

SELFHTML/Quickbar  HTML  Tabellen

© 1998  Stefan Münz, muenz@csi.com