The Web Design Group

TABLE - Tabelle

Syntax <TABLE>...</TABLE>
Attribut-Spezifikationen
  • SUMMARY=Text (Zweck/Struktur der Tabelle)
  • WIDTH=Length (Tabellenbreite)
  • BORDER=Pixels (Randbreite)
  • FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ] (äußere Rand)
  • RULES=[ none | groups | rows | cols | all ] (Innenränder)
  • CELLSPACING=Length (Leerräume zwischen den Zellen)
  • CELLPADDING=Length (Leeräume innerhalb der Zellen)
  • ALIGN=[ left | center | right ] (Tabellenausrichtung)
  • BGCOLOR=Color (Hintergrundfarbe der Tabelle)
  • gemeinsame Attribute
Inhalte Ein optionales CAPTION, gefolgt von keinem oder mehreren COL- und COLGROUP-Elementen, gefolgt von einem optionalen THEAD -Element, einem optionalen TFOOT-Element und schließlich einem oder mehreren TBODY-Elementen
Beinhaltet in APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

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.

Weitere Informationen