SELFHTML: HTML / Tabellen / Tabellenbeschriftung und Tabellenausrichtung

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.

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   notieren, um den Textfluß zu unterbrechen und unterhalb der Tabelle fortzufahren (br = break = Umbruch, clear = löschen, all = alles).

Beachten Sie:

Neben   sind auch die Angaben   und   erlaubt. Experimentieren Sie mit diesen Angaben, wenn   nicht den gewünschten Effekt bringt.


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

SELFHTML/Quickbar HTML Tabellen