Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Tabellenbeschriftung und Tabellenausrichtung

Informationsseite

nach unten Tabellenüberschrift / Tabellenunterschrift definieren
nach unten Tabellenausrichtung
nach unten Weitere Informationen

 nach unten 

HTML 3.2XHTML 1.0MS IE 2.0Netscape 2.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

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

nach obennach unten

HTML 3.2XHTML 1.0deprecated (missbilligt)MS IE 2.0Netscape 2.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

Beispiel-Seite 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 Seite 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 Seite allgemeines Block-Element (div) ein und richten Sie dieses mit align oder einer entsprechenden CSS-Eigenschaft (style="text-align:") aus.

nach obennach unten

Weitere Informationen

Das caption-Element kann auch Kapitel Universalattribute enthalten.

In der Kapitel 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:
Seite Element-Referenz und Seite Attribut-Referenz für Tabellenüberschrift (<caption>...</caption>)
Seite Element-Referenz und Seite Attribut-Referenz für Tabellen (<table>...</table>)

 nach oben
weiter Seite Tabellen als Mittel für Web-Seiten-Layouts
zurück Seite Zellen verbinden
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/html/tabellen/umgebung.htm