SELFHTML/Quickbar  HTML  Tabellen


Tabellenbeschriftung und Tabellenausrichtung

Diese Seite ist ein Dokument mit Informationstext

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

 

HTML3.2 Tabellenüberschrift / Tabellenunterschrift definieren

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

 

HTML3.2 Tabellen ausrichten

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

 

Netscape3.0 Abstand zwischen Tabelle und umfließendem Text

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

 

HTML3.2 Textfortsetzung unterhalb der Tabelle erzwingen

Beispiel 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