SELFHTML: HTML/XHTML / Tabellen / Tabellenbeschriftung und Tabellenausrichtung
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie Über- oder Unterschriften für HTML-Tabellen definieren, und wie Sie Tabellen ausrichten können.
Keywords: SELFHTML, HTML, XHTML, Tabellen, Tabellenbeschriftung, Tabellenüberschrift, Tabellenausrichtung, Textumfluss, caption, table, align
Date: 2005-10-31T12:25:34+01:00

| # 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

© 2007 Impressum