HTML Tag table:
Tabelle

von Thomas Salvador.

Beispiel

Grundlegende HTML-Tabelle:

<table>
<tr>
  <th>Überschrift,Z1,S1</th>
  <th>Überschrift,Z1,S2</th>
  <td>Z1,S3</td>
</tr>
<tr>
  <th>Überschrift,Z2,S1</th>
  <td>Z2,S2</td>
  <td>Z2,S3</td>
</tr>
<tr>
  <td>Z3,S1</td>
  <td>Z3,S2</td>
  <td>Z3,S3</td>
</tr>
</table>

Anwendung

Mit dem HTML Tag <table> wird eine HTML-Tabelle gesetzt und beschrieben.

Diese Tabellen bestehen aus Zeilen (<tr>), die ihrerseits in normale Zellen (<td>) und Überschriftszellen (<th>) zerfallen.

Tabellen in HTML sind sehr flexibel. So können Bereiche von Zeilen explizit als Kopfbereich (<thead>), Hauptbereich (<tbody>) und Fußbereich (<tfoot>) der Tabelle bezeichnet werden. Diese Bereiche sind optional und geben den umschlossenen Zeilen und Zellen eine besondere Bedeutung, so dass zum Beispiel ein (<thead>)-Bereich auf jeder Seite wiederholt wird, wenn sich die Tabelle über mehrere Seiten erstreckt.

Darüberhinaus wird die Möglichkeit geboten, Tabellen logisch in Spalten (<col>) zu zerlegen, die auch gruppiert (<colgroup>) werden können.

Attribute

<table> nutzt die HTML Attribute:

AttributBeschreibung
alignHorizontale Position einer Tabelle
backgroundHintergrundbild der Tabelle
bgcolorHintergrundfarbe der Tabelle
borderRahmendicke der Tabelle
cellpaddingAbstand innerhalb von Zellen
cellspacingAbstand zwischen den Tabellenzellen
classSpace-separierte Liste von CSS-Klassen
dirAusrichtung von Text und Tabellen
frameSpezifizierung des Außenrahmens
idUniversalattribut
langSprache des Elementes
onclickAuszuführender Javascript-Code bei Klick
ondblclickAuszuführender Javascript-Code bei Doppelklick
onkeydownAuszuführender Javascript-Code bei Drücken einer Taste
onkeypressAuszuführender Javascript-Code bei gedrückt gehaltener Taste
onkeyupAuszuführender Javascript-Code bei Loslassen einer Taste
onmousedownAuszuführender Javascript-Code bei Drücken einer Maustaste
onmousemoveAuszuführender Javascript-Code, wenn die Maus bewegt wird
onmouseoutAuszuführender Javascript-Code, wenn die Maus das Element verlässt
onmouseoverAuszuführender Javascript-Code, wenn die Maus auf das Element bewegt wird
onmouseupAuszuführender Javascript-Code bei Loslassen einer Maustaste
rulesInnenlinien bei table
styleInline Style
summaryZusammenfassung von Tabellen
titleBezeichnender Titel
widthBreite der Tabelle

Browserunterstützung

Der HTML Tag <table> wird zumindest von den HTML-Browsern Avant Palm OS, Avant Windows, Chrome, Firefox, Internet Explorer, Netscape, Opera, Safari und Web TV / MSN interpretiert.

Standards

Die HTML Anweisung <table> wird mindestens in den Standards HTML und XHTML definiert.

Inhalte

Der HTML-Befehl <table> kann die Anweisungen <caption>, <col>, <colgroup>, <tbody>, <tfoot> und <thead> enthalten.

Verwendung

<table> kann in den HTML Tags <blockquote>, <body>, <button>, <center>, <dd>, <div>, <fieldset>, <form>, <iframe>, <li>, <noframes>, <noscript>, <object>, <td> und <th> enthalten sein.

Hinweise

Die Formatierungsmöglichkeiten von Tabellen waren bereits in HTML so umfassend, dass Tabellen häufig genutzt wurden, um ein Layout zu erzeugen. Heutzutage sollte man Tabellen nur noch im geeigneten Kontext zur tabellarischen Darstellung von Informationen nutzen, da CSS überlegende Formatierungsmöglichkeiten bietet. Insbesondere sind einige Optionen offiziell verworfen – von Browsern natürlich weiterhin unterstützt. Sie können mit CSS ebenso gut oder besser beschrieben werden.

Trotz der Möglichkeiten von CSS soll nicht verschwiegen werden, dass einiges mit Tabellen oft leichter zu erzeugen ist. Ein Trade-Off zwischen Zugänglichkeit (Barrierearmut), Standardkonformität und Aufwand bei der Erstellung ist hier also zu finden.

Weitere Beispiele und Lösungen

Keine.