| 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

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 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:

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 ab V3.0 interpretiert wird.

## 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 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

Anzeigebeispiel: So sieht's aus

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:

In diesem Beispiel wird zunächst mit <div align=center> ein zentriert ausgerichteter Abschnitt definiert.
(siehe auch Größere Textabschnitte ausrichten).

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

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

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

| HTML-Dateien selbst erstellen
|  | Dokumentation: HTML
|  |  | Tabellen