SELFHTML/Quickbar HTML Tabellen

| ## Tips zum Umgang mit blinden Tabellen
| 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.

## Mehrspaltigkeit

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.

## Text und Grafik

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

## Seitenränder erzwingen

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.

## Farbflächen

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