SELFHTML: HTML/XHTML / Tabellen / Tabellenbeschriftung und Tabellenausrichtung

SELFHTML/Navigationshilfen HTML/XHTML Tabellen
	Tabellenbeschriftung und Tabellenausrichtung
	Tabellenüberschrift / Tabellenunterschrift definieren Tabellenausrichtung Weitere Informationen

Tabellenüberschrift / Tabellenunterschrift definieren

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

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabellen&uuml;berschrift / Tabellenunterschrift definieren</title>
</head>
<body>

<table border="1">
  <caption>Assoziationen</caption>
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

<caption>...</caption> definiert eine Tabellenüberschrift. Das Element muss unmittelbar nach dem einleitenden <table>-Tag notiert werden. Es bewirkt normalen Fließtext. Um den enthaltenen Text auffällig zu gestalten, darf das caption-Element Inline-Elemente als weitere Elemente enthalten. Eine andere Möglichkeit besteht darin, das caption-Element mit Stylesheets zu formatieren.

Wenn Sie nichts anderes angeben, bewirkt das caption-Element eine Tabellenüberschrift. Um eine Tabellenunterschrift zu erzwingen, können Sie <caption align="bottom"> notieren. Ferner sind die Angaben align="left" für seitliche Überschrift links und align="right" für seitliche Überschrift rechts erlaubt. Während align="bottom" von den Browsern interpretiert wird, werden align="left" und align="right" meistens nicht oder nicht korrekt unterstützt. Das Attribut align ist darüberhinaus als deprecated gekennzeichnet, soll also künftig aus dem HTML-Standard entfallen. Alternativangaben in CSS werden von den weit verbreiteten Browsern aber im Zusammenhang mit dem caption-Element bislang nicht unterstützt.

Tabellenausrichtung

Sie können eine Tabelle links, zentriert oder rechts ausrichten. Die bekannten Browser reagieren dabei so, dass eine links oder rechts ausgerichtete Tabelle, die nicht die gesamte zur Verfügung stehende Breite beansprucht, bewirkt, dass nachfolgende Inhalte um die Tabelle herumfließen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabellenausrichtung</title>
</head>
<body>

<table border="1" align="left">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
</table>

<p>Die Tabelle sagt zwar schon eine Menge aus, aber nat&uuml;rlich
nicht alles. Deshalb sollten Sie die drei St&auml;dte lieber mal selbst
besuchen.<br clear="all"></p>
<p>Keine Zeit, kein Geld? Na, dann tun Sie's doch im Web!</p>

<table border="1" style="float:left; margin-right:10px; margin-bottom:6px">
  <tr>
    <th colspan="2">Menschen</th>
  </tr>
  <tr>
    <td>Esel</td>
    <td>Affen</td>
  </tr>
</table>

<p>Die Tabelle sagt zwar schon eine Menge aus, aber nat&uuml;rlich
nicht alles. Deshalb sollten Sie sich selbst von der Richtigkeit ihrer Aussagen
&uuml;berzeugen.</p>
<p style="clear:left">Gehen Sie einfach mal in den Zoo, gucken
Sie sich Esel und Affen an und vergleichen Sie dann selbst!</p>

</body>
</html>

Erläuterung:

Im Beispiel sind zwei Tabellen und unterhalb davon jeweils zwei Textabsätze notiert. Die obere Tabelle ist mit align="left" im einleitenden <table>-Tag linksbündig ausgerichtet. Bei Netscape und beim Internet Explorer hat das die Wirkung, dass nachfolgender Text rechts um die Tabelle fließt. Mit align="right" können Sie eine Tabelle rechtsbündig ausrichten und mit align="center" zentriert. Das align-Attribut ist jedoch als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Die zweite Tabelle im obigen Beispiel zeigt daher, wie sich der gleiche Effekt mit CSS-Formaten erzielen lässt.

Bei der Variante mit den CSS-Formaten sind außerdem noch Angaben zum Abstand rechts und unten angegeben, sodass der nachfolgende Text nicht so sehr an der Tabelle "klebt". Die Browser interpretieren auch vergleichbare HTML-Attribute dafür: mit <table align="center" hspace="10" vspace="6"> erreichen Sie beispielsweise, dass zwischen Tabelle und umfließendem Text ein Horizontalabstand von 10 Pixeln und ein Vertikalabstand von 6 Pixeln erzwungen wird. Die Attribute hspace und vspace im Zusammenhang mit Tabellen gehörten jedoch nie zum HTML-Standard.

Die beiden obigen Beispiele zeigen außerdem, wie Sie den Textumfluss abbrechen und die Textfortsetzung unterhalb der Tabelle erzwingen können. In der ersten Tabelle des Beispiels, wo alles mit HTML realisiert ist, ist dazu das Tag <br clear="all"> notiert - also ein Zeilenumbruch mit einem Attribut, das für die Fortsetzung unterhalb des Umflussbereichs sorgt. Das clear-Attribut in HTML ist jedoch ebenfalls als deprecated gekennzeichnet. Der Text unterhalb der zweiten Tabelle im Beispiel zeigt, wie der gleiche Effekt mit CSS-Formaten erreichbar ist.

Beachten Sie:

Wenn die Tabelle selbst größere Inhalte hat, müssen Sie eine Gesamtbreite der Tabelle erzwingen (<table width=>), damit links bzw. rechts noch Platz bleibt für den umfließenden Text.

Wenn Sie eine Tabelle zwar linksbündig oder rechtsbündig ausrichten wollen, aber zugleich verhindern wollen, dass nachfolgende Inhalte um die Tabelle fließen, dann schließen Sie die gesamte Tabelle in ein allgemeines Block-Element (div) ein und richten Sie dieses mit align oder einer entsprechenden CSS-Eigenschaft (style="text-align:") aus.

Weitere Informationen

Das caption-Element kann auch Universalattribute enthalten.

In der HTML-Referenz finden Sie Angaben darüber, wo die hier vorgestellten HTML-Elemente und Attribute vorkommen dürfen, und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz und Attribut-Referenz für Tabellenüberschrift (<caption>...</caption>)
Element-Referenz und Attribut-Referenz für Tabellen (<table>...</table>)


	Tabellen als Mittel für Web-Seiten-Layouts
	Zellen verbinden

SELFHTML/Navigationshilfen HTML/XHTML Tabellen