TABLE - Tabelle

Das TABLE-Element definiert eine Tabelle für multi-dimensionale Daten, die in Reihen und Spalten angeordnet sind. TABLE wird auch als Layout-Hilfmittel benutzt, jedoch sollten Autoren diese Anwendung so gut wie möglich vermeiden. Tabellen können bei Usern mit schmalen Fenstern, großen Schriften oder nicht-visuellen Browsern Probleme verursachen, diese Probleme treten oft hervor, wenn die Tabellen nur zu Layout-Zwecken verwendet werden. Außerdem zeigen heutige Browser solange nicht alles an bis die Tabelle komplett geladen wurde, was zu sehr auffälligen Effekten führen kann, wenn ein komplettes Dokument aus einer Tabelle besteht. Autoren sollten versuchen Style Sheets anstatt des TABLE-Elements für das Layout zu verwenden, allerdings können dabei die implementierten Fehler in aktuellen Browsern im Umgang mit Style Sheets Schwierigkeiten verursachen.

Das TABLE-Element kann eine Reihe von optionalen Elementen enthalten, die die Strukturierbarkeit der Tabelle sehr bereichern. Das optionale CAPTION-Element gibt der Tabelle eine Überschrift und wird von den ebenfalls optionalen COL- und COLGROUP-Elementen gefolgt, die die Spaltenbreiten und -gruppen festlegen. Die THEAD, TFOOT und TBODY-Elemente folgen darauf mit Reihengruppen. Die optionalen THEAD- und TFOOT-Elemente beinhalten die Kopf und Fußzeilen, während das TBODY-Element die eigentlichen Tabellenreihengruppen festlegt. Eine Zeilengruppe enthält TR-Elemente für individuelle Zeilen und jedes TR-Element beinhaltet TH- oder TD-Elemente für die Kopf- oder Datenzellen.

Zu guter Letzt wird ein TBODY-Element innerhalb einer TABLE benötigt, jedoch sind die Start- und End-Tags des TBODY-Elements optional, wenn THEAD oder TFOOT fehlen. Eine einfache Tabelle könnte folgendermaßen ausgedrückt werden:

<TABLE>
  <TR>
    <TH>Abbreviation</TH>
    <TH>Long Form</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
  </TR>
  <TR>
    <TD>IMHO</TD>
    <TD>In My Humble Opinion</TD>
  </TR>
  <TR>
    <TD>OTOH</TD>
    <TD>On The Other Hand</TD>
  </TR>
</TABLE>

Die gleiche Tabelle könnte mit einer reichhaltigeren Struktur ausgedrückt werden, wenn die Zeilen gruppiert würden und eine Überschrift hinzugefügt würde, wie im nächsten Beispiel. Die zusätzliche Strukturinformation erlaubt einem Autor die Darstellung der Tabelle mit Style Sheets oder den Darstellungsattributen von TABLE einfacher zu beeinflussen.

<TABLE>
  <CAPTION>Common Usenet Abbreviations</CAPTION>
  <THEAD>
    <TR>
      <TH>Abbreviation</TH>
      <TH>Long Form</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>AFAIK</TD>
      <TD>As Far As I Know</TD>
    </TR>
    <TR>
      <TD>IMHO</TD>
      <TD>In My Humble Opinion</TD>
    </TR>
    <TR>
      <TD>OTOH</TD>
      <TD>On The Other Hand</TD>
    </TR>
  </TBODY>
</TABLE>

Das TABLE-Element nimmt ein optionales SUMMARY-Attribut zur Beschreibung des Zwecks und/oder der Struktur der Tabelle entgegen. Die Überblick, der durch das SUMMARY-Attribut angeboten wird, ist teilweise Usern mit nicht-visuellen Browsern hilfreich. Bei einfachen Tabellen ist eine gute CAPTION normalerweise eine ausreichende Zusammenfassung, jedoch können komplexe Tabellen durch einen detailierteren Überblick mit Hilfe des SUMMARY-Attributs profitieren. Das folgende Beispiel verwendet SUMMARY um eine Tabelle zu beschreiben. Nehmen Sie zur Kenntnis, dass die Zusammenfassung auch in einem Abschnitt vor der Tabelle enthalten sein kann, was hilfreich ist, da nur wenige Browser SUMMARY unterstützen.

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for symbols and Greek letters.">
  <COLGROUP>
  <COLGROUP SPAN=3>
  <THEAD>
    <TR>
      <TH SCOPE=col>Character</TH>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>Latin small f with hook</TD>
      <TD>&amp;fnof;</TD>
      <TD>&amp;#402;</TD>
      <TD>&amp;#x192;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

Das TABLE-Element nimmt eine Reihe von optionalen Attributen entgegen um Darstellungshinweise in visuellen Browsern anzubieten. Äquivalente dieser Attribute Cascading Style Sheets sind unter Entwicklung und nicht so weit verbreitet unter den Browsern.

• Das WIDTH-Attribut spezifiziert die Breite einer Tabelle als eine Pixelzahl oder einen Prozentwert des zur Verfügung stehenden horizontalen Leerraums. Breitenangaben in Pixel sollten vermieden werden, besonders bei Breiten über 500 Pixeln, da dies zu unnötigem horizontalen Scrollen für manche User führt.

• Das BORDER-Attribut spezifiziert die Randbreite in Pixeln.

• Das FRAME-Attribut legt fest, welche Seite des äußeren Rands sichtbar ist. Mögliche Werte sind void für keinen Rand, above nur für den oberen Rand, below nur für den unteren Rand, hsides nur für den oberen und den unteren Rand, vsides nur für den linken und rechten Rand, lhs nur für den linken Rand, rhs nur für den rechten Rand und box oder border für einen Rand von allen Seiten. Der Standardwert ist void, bis das BORDER-Attribut eine positive Breite vorgibt, dann ist der Standardwert FRAME=border. <TABLE BORDER> ist eine gültige, gut-unterstützte Kurzschrift für <TABLE FRAME=border>.

• Das RULES-Attribut legt die Ränder zwischen den Tabellenzellen fest. Mögliche Wert sind none keine Innenränder, groups nur für Ränder zwischen Zeilen- und Spaltengruppen, rows nur für Ränder zwischen Zeilen, cols nur für Ränder zwischen Spalten und all für Ränder zwischen allen Zellen. None ist der Standardwert wenn BORDER=0 verwendet wird oder wenn keine BORDER-Attribut gesetzt ist. All ist der Standardwert für jegliche andere Verwendung von BORDER.

• Das CELLSPACING-Attribut definiert den Abstand zwischen Tabellenzellen und das CELLPADDING-Attribut den Seitenabstand innerhalb Tabellenzellen (z.B. zwischen der Rand und dem Zellinhalt). Der Wert kann als Pixelzahl oder als Prozentwert angegeben werden, da aber die meisten Browser Prozentwerte nicht unterstützen, behandeln sie CELLPADDING="20%" als wenn dort CELLPADDING="20" stände. Ein Prozentwert verhält sich relativ zum vertikalen Raum für das vertikale Padding oder Spacing, außerdem wird der Raum gleichmäßig zwischen dem oberen und unteren Raum aufgeteilt. Das horizontale Padding und Spacing verhält entsprechend. Das Padding oder Spacing wird immer auf alle vier Seiten angewandt.

  Die padding-Eigenschaften der Cascading Style Sheets erlauben einem Autor verschiedene Paddingwerte für die verschiedenen Seiten festzulegen, sie sind aber nicht so gut unterstütz wie die CELLPADDING-Attribute.

• Das deprecated ALIGN-Attribut legt die horizontale Ausrichtung einer Tabelle in visuellen Browser fest. Mögliche Werte sind left, right und center. Browser zeigen generell links- oder rechts-ausgerichtete Tabellen als floating Tabellen an, mit dem folgenden Inhalt, der die TABLE umfließt. Um Vorzubeugen, dass der Inhalt die Tabelle umfließt, verwenden Sie <BR CLEAR=all> am Ende der TABLE.

  Da viele Browser ALIGN=center in Kombination TABLE nicht unterstützen, würden sich die Autoren wünschen die TABLE innerhalb eines CENTER-Elements zu platzieren.

  Style Sheets bieten hier einen flexibleren Umgang in der Ausrichtung der Tabelle, jedoch mit einer etwas geringeren Browserunterstützung als bei dem ALIGN-Attribut.

• Das deprecated BGCOLOR-Attribut bestimmt die Hintergrundfarbe für die Tabelle. Die Kombination dieses Attributs mit <FONT COLOR=...> kann Text im Netscape 2.x unsichtbar oder unleserlich werden lassen, der BGCOLOR in TABLE-Elementen nicht unterstützt. BGCOLOR ist auch beim Support durch andere Browser mit Vorsicht zu genießen, da einige es nicht überschreiben können, wenn es andere vom Autor spezifizierte Farben überdeckt. Style Sheets bieten eine sichere und flexiblere Methode um die Hintergrundfarbe einer Tabelle festzulegen.

Weitere Informationen

• TABLE in der W3C HTML 4.01 Spezifikation
• TABLE in der W3C HTML 3.2 Spezifikation
• TABLE in der WDG HTML 3.2 Referenz
• TABLE in Learning HTML 3.2 by Examples
• TABLE in Index DOT Html