SELFHTML/Quickbar HTML Tabellen

| ## Tabellenbeschriftung und Tabellenausrichtung
| Tabellenüberschrift / Tabellenunterschrift definieren Tabellen ausrichten Abstand zwischen Tabelle und umfließendem Text Textfortsetzung unterhalb der Tabelle erzwingen

## Tabellenüberschrift / Tabellenunterschrift definieren

Anzeigebeispiel: So sieht's aus

Sie können für eine Tabelle eine von der Tabelle getrennte, aber ihr zugehörige Über- oder Unterschrift definieren.

### Beispiel 1:

    <table border>
      <caption align=top>Tabellenüberschriftentext</caption>
        <tr>
          <td>Daten</td>
          <td>Daten</td>
        </tr>
    </table>

### Beispiel 2:

    <table border>
     <caption align=bottom>Tabellenunterschriftentext</caption>
        <tr>
          <td>Daten</td>
          <td>Daten</td>
        </tr>
    </table>

### Erläuterung:

`<caption align=top>` definiert eine Tabellenüberschrift, `<caption align=bottom>` eine Tabellenunterschrift, `<caption align=left>` eine seitliche Tabellenüberschrift links und `<caption align=right>` eine seitliche Tabellenüberschrift rechts (caption = Überschrift, align = Ausrichtung, top = oben, bottom = unten, left = links, right = rechts). Dahinter folgt der Text der Über- bzw. Unterschrift. Am Ende des Textes muß ein abschließendes `</caption>` stehen. Notieren Sie den Befehl innerhalb der Tabelle, am besten unmittelbar unter dem einleitenden Tabellen-Tag (so wie in den beiden obigen Beispielen).

### Beachten Sie:

Die meisten WWW-Browser, darunter Netscape und MS Internet Explorer, stellen Tabellenüberschriften und Tabellenunterschriften in normaler Fließtextschrift dar. Um die Über- bzw. Unterschrift auffällig zu formatieren, müssen Sie innerhalb von `<caption>`...`</caption>` Befehle zur Textgestaltung anwenden, oder Sie definieren CSS Style-Sheet-Angaben für das `<caption>`-Tag.

## Tabellen ausrichten

Anzeigebeispiel: So sieht's aus

Sie können Text links oder rechts um Tabellen fließen lassen, sofern die Tabelle nicht die gesamte Anzeigebreite einnimmt.

### Beispiel 1:

      <table border width=50% align=left>
        <tr>
          <td>Daten</td>
          <td>Daten</td>
        </tr>
      </table>
    Das ist Text, der rechts neben der Tabelle angezeigt wird

### Beispiel 2:

      <table border width=50% align=right>
        <tr>
          <td>Daten</td>
          <td>Daten</td>
        </tr>
      </table>
    Das ist Text, der links neben der Tabelle angezeigt wird

### Erläuterung:

Mit `align=left` (siehe Beispiel 1) im einleitenden Tabellen-Tag erreichen Sie, daß Text, der im Anschluß an die Tabelle notiert wird, rechts um die Tabelle fließt (align = Ausrichtung, left = links). Die Tabelle steht in diesem Fall also links, der umfließende Text rechts davon.
Mit `align=right` (siehe Beispiel 2) können Sie den Text links um die Tabelle fließen lassen (right = rechts). Die Tabelle steht in diesem Fall also rechts, der umfließende Text links davon.
Mit `align=center` können Sie die Tabelle zentriert ausrichten (center = zentriert). In diesem Fall fließen nachfolgende Elemente nicht um die Tabelle.

### Beachten Sie:

Wenn die Tabelle selbst größere Inhalte hat, müssen Sie eine Gesamtbreite der Tabelle erzwingen, damit links bzw. rechts noch Platz bleibt für den umfließenden Text. Dies geschieht in den obigen Beispielen durch die Angabe `width=50%` im einleitenden Tabellen-Tag. Dadurch nimmt die Tabelle maximal 50% der Gesamtbreite des Anzeigefensters ein.

Im umfließenden "Text" sind alle HTML-Elemente zur Gestaltung erlaubt, also beispielsweise Überschriften, Listen, auch Grafik- und Multimedia-Referenzen, ja sogar neue Tabellen erlaubt.

## Abstand zwischen Tabelle und umfließendem Text

Anzeigebeispiel: So sieht's aus

Wenn Sie nichts anderes angeben, umfließt der Text die Tabelle ohne sichtbaren Abstand. Ästhetischer ist ein gewisser Abstand. Sie können den Abstand zwischen Tabelle und umfließendem Text definieren.

### Beispiel:

      <table border width=50% align=left hspace=20 vspace=5>
        <tr>
          <td>Daten</td>
          <td>Daten</td>
        </tr>
      </table>
    Das ist Text, der rechts neben der Tabelle angezeigt wird

### Erläuterung:

Wenn Sie im einleitenden Tabellen-Tag mit `align=` eine Anweisung zum Textumfluß notieren, können Sie zusätzlich mit `hspace=` [Pixel] den seitlichen Abstand zwischen Tabelle und umfließendem Text bestimmen (hspace = horizontal space = horizontaler Abstand). Mit `vspace=` [Pixel] können Sie den Abstand zum Text ober- und unterhalb der Tabelle festlegen (vspace = vertical space = vertikaler Abstand).

### Beachten Sie:

Die Angaben zum Abstand gehören nicht zum offiziellen HTML-Standard und werden bislang nur von Netscape seit Version 3.0 interpretiert.

## Textfortsetzung unterhalb der Tabelle erzwingen

Anzeigebeispiel: So sieht's aus

Manchmal möchten Sie vielleicht nur zwei oder drei Zeilen kommentierenden Text neben der Tabelle haben und den folgenden Text dann unterhalb der Tabelle fortsetzen. Dazu müssen Sie einen speziellen Umbruch erzwingen, der den Textfluß neben der Tabelle unterbricht und stattdessen unterhalb der Tabelle fortfährt.

### Beispiel:

      <table border width=50% align=left>
        <tr>
          <td>Daten;/td>
          <td>Daten;/td>
        </tr>
      </table>
    Das ist Text, der rechts neben der Tabelle angezeigt wird <br clear=all>
    Das ist Text, der unterhalb der Tabelle weitergeht

### Erläuterung:

Wenn Sie im einleitenden Tabellen-Tag mit `align=` eine Anweisung zum Textumluß notieren, können Sie innerhalb des umfließenden Textes die Angabe `<br clear=all>` notieren, um den Textfluß zu unterbrechen und unterhalb der Tabelle fortzufahren (br = break = Umbruch, clear = löschen, all = alles).

### Beachten Sie:

Neben `<br clear=all>` sind auch die Angaben `<br clear=left>` und `<br clear=right>` erlaubt. Experimentieren Sie mit diesen Angaben, wenn `<br clear=all>` nicht den gewünschten Effekt bringt.

weiter: | Tips zum Umgang mit blinden Tabellen
zurück: | Farbige Tabellen

SELFHTML/Quickbar HTML Tabellen

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