Tabellen in HTML

HTML-Elemente für die Erzeugung von Tabellen

Tabellen in HTML werden eingerahmt durch das TABLE-Element; das Ende-Tag </TABLE> darf hier nicht fehlen. Ein optionales CAPTION-Element gibt der Tabelle eine Überschrift. Ansonsten ist sie strukturiert in Zeilen mittels des TR-Elementes, diese wiederum in einzelne Zellen (Cells), wobei zwischen Header-Zellen (TH) und Datenzellen (TD) unterschieden wird; bei diesen Elementen sind die Ende-Tags </TR>, </TH> und </TD> verzichtbar. Im Inhalt von Header- und Datenzellen können alle normalen Textelemente einschließlich Hyperlinks und Graphiken auftreten. (Beispiele für Fließtext in HTML-Tabellen siehe später.)

Hier eine einfache Tabelle mit drei schmalen Spalten:

Wahlergebnis vom 17.12.1995
Partei Stimmen 1995 Veränderung
SPÖ 38,3% +3,4%
ÖVP 28,3% +0,6%
FPÖ 22,1% -0,4%
Grüne 4,6% -2,7%
Liberales Forum 5,3% -0,6%
Und so sieht die HTML-Quelle dieser Tabelle aus:

<TABLE><CAPTION>Wahlergebnis vom 17.12.1995</CAPTION> <TR><TH>Partei<TH>Stimmen 1995<TH>Veränderung <TR><TD>SPÖ<TD>38,3%<TD>+3,4% <TR><TD>ÖVP<TD>28,3%<TD>+0,6% <TR><TD>FPÖ<TD>22,1%<TD>-0,4% <TR><TD>Grüne<TD>4,6%<TD>-2,7% <TR><TD>Liberales Forum<TD>5,3%<TD>-0,6% </TABLE>

Ränder und Linien in Tabellen

Um Linien als Rand um die Tabelle und zwischen den Zeilen und Spalten zu bekommen, gibt es folgende Attribute des TABLE-Elementes:

BORDER: Von Netscape eingeführt, in HTML 3.2 übernommen: Angabe der Breite der Linien in Pixeln; BORDER=0: keine Linien; BORDER entspricht BORDER=1.
FRAME (nicht in HTML 3.2, aber in HTML 4.0): Bestimmung der zu ziehenden Randlinien durch die Attributwerte VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER.
RULES (nicht in HTML 3.2, aber in HTML 4.0): Bestimmung der zu ziehenden Linien innerhalb der Tabelle durch die Attributwerte NONE, BASIC, ROWS, COLS, ALL.

Obige Tabelle mit <TABLE BORDER=1> (impliziert FRAME=BOX RULES=ALL).

Wahlergebnis vom 17.12.1995
Partei Stimmen 1995 Veränderung
SPÖ 38,3% +3,4%
ÖVP 28,3% +0,6%
FPÖ 22,1% -0,4%
Grüne 4,6% -2,7%
Liberales Forum 5,3% -0,6%

Obige Tabelle mit <TABLE FRAME=BOX RULES=BASIC>:

Wahlergebnis vom 17.12.1995
Partei Stimmen 1995 Veränderung
SPÖ 38,3% +3,4%
ÖVP 28,3% +0,6%
FPÖ 22,1% -0,4%
Grüne 4,6% -2,7%
Liberales Forum 5,3% -0,6%

Weitere Attribute von TABLE

WIDTH=n|p%: Breite der Tabelle in Pixeln bzw. Prozent der Fensterbreite des Browsers. Dieses Attribut ist auch bei einzelnen Zellen (TH, TD) möglich. Bedeutung hat eine Breitenangabe insbesondere, wenn Fließtext in den Zellen vorkommt (Beispiel siehe unten).
CELLSPACING=n: Zwischenraum - in Pixeln - zwischen Tabellenzellen.
CELLPADDING=n: Zwischenraum - in Pixeln - zwischen dem Inhalt und dem Rand von Tabellenzellen.

Obige Tabelle mit CELLSPACING=6 CELLPADDING=4:

Wahlergebnis vom 17.12.1995
Partei Stimmen 1995 Veränderung
SPÖ 38,3% +3,4%
ÖVP 28,3% +0,6%
FPÖ 22,1% -0,4%
Grüne 4,6% -2,7%
Liberales Forum 5,3% -0,6%

Ausrichtung des Inhaltes von Zellen

Folgende Ausrichtungsattribute können für einzelne Zellen bei TH und TD angegeben werden oder auch übergeordnet bei TR:

ALIGN

Horizontale Ausrichtung des Zelleninhalts; Alternativen sind:
LEFT, CENTER, RIGHT, JUSTIFY, CHAR für linksbündig, zentriert, rechtsbündig, Blocksatz (oder linksbündig, wenn nicht unterstützt), an einem bestimmten Zeichen ausgerichtet. Die letzten beiden Alternativen funktionieren bei den meisten Browsern nicht oder nur teilweise. Hier die obige Tabelle mit rechtsbündiger Ausrichtung in den Datenzellen, die die Zahlenwerte enthalten:

Partei Stimmen 1995 Veränderung
SPÖ 38,3% +3,4%
ÖVP 28,3% +0,6%
FPÖ 22,1% -0,4%
Grüne 4,6% -2,7%
Liberales Forum 5,3% -0,6%

CHAR

Angabe des Zeichens für ALIGN=CHAR, z.B. CHAR=","

VALIGN

Vertikale Ausrichtung von mehrzeiligem (oder graphischen) Zelleninhalt; Alternativen sind:
TOP, MIDDLE, BOTTOM, BASELINE. BASELINE speziell bedeutet, daß die erste Zeile in nebeineinander liegenden Zellen auf einer Grundlinie ausgerichtet sind. Die Wirkung der anderen Werte ist in den folgenden Beispiel-Header-Zellen in Abwandlung zu meiner Beispieltabelle zu sehen.

Partei Stimmen
1995 Veränderung
gegenüber 1994
Partei Stimmen
1995 Veränderung
gegenüber 1994
Partei Stimmen
1995 Veränderung
gegenüber 1994

Partei	Stimmen 1995	Veränderung gegenüber 1994
Partei	Stimmen 1995	Veränderung gegenüber 1994
Partei	Stimmen 1995	Veränderung gegenüber 1994

Zellen über mehrere Zeilen oder Spalten

Zellen, die sich über mehr als eine Zeile bzw. mehr als eine Spalte erstrecken sollen, können mit folgenden Attributen im TH- bzw. TD-Element gebildet werden:

ROWSPAN=zahl: Steht im Element der ersten Zeile, in dem die Zelle über zahl Zeilen beginnen soll; in den Folgezeilen gibt es keine Elemente für diese Zelle mehr.
COLSPAN=zahl: Die zugehörige Zelle soll sich über zahl Spalten erstrecken.

Farbige Tabellenzellen

...gibt es seit Netscape Version 3.0, realisiert durch das BGCOLOR-Attribut z.B. bei TD.

Spezielle Anwendungen von Tabellen

Eingerahmter Text

Dieser Text steht einfach zwischen folgenden Start bzw. Ende-Tags:

<TABLE BORDER=1 WIDTH="100%" CELLPADDING=8><TR><TD>
</TABLE>

Ansonsten handelt es sich um normalen Fließtext.

Farblich unterlegter Text

Dieser Text steht einfach zwischen folgenden Start bzw. Ende-Tags:

<TABLE BORDER=0 WIDTH="100%" CELLPADDING=8><TR><TD BGCOLOR="#BBFFDF">
</TABLE>

Ansonsten handelt es sich um normalen Fließtext.

Feine Linien

Partei	Stimmen 1995	Veränderung
SPÖ	38,3%	+3,4%
ÖVP	28,3%	+0,6%
FPÖ	22,1%	-0,4%
Grüne	4,6%	-2,7%
Liberales Forum	5,3%	-0,6%

Die eigentliche Tabelle besitzt keine Ränder: Diese erscheinen in der Dicke, die das CELLSPACING-Attribut vorgibt, durchz die Hintergrundfarbe einer einzelligen umrahmenden Tabelle.

<TABLE BORDER=0> <TR> <TD BGCOLOR="#000000"> <TABLE BORDER=0 CELLSPACING=1 CELLPADDING=2 WIDTH="100%"> <TR><TH BGCOLOR="#BBFFDF">Partei</TH><TH BGCOLOR="#BBFFDF">Stimmen 1995</TH><TH BGCOLOR="#BBFFDF">Veränderung</TH></TR> <TR><TD BGCOLOR="#BBFFDF">SPÖ</TD><TD BGCOLOR="#BBFFDF" ALIGN=RIGHT>38,3%</TD><TD BGCOLOR="#BBFFDF" ALIGN=RIGHT>+3,4%</TD></TR> <TR><TD BGCOLOR="#BBFFDF">ÖVP</TD><TD BGCOLOR="#BBFFDF" ALIGN=RIGHT>28,3%</TD><TD BGCOLOR="#BBFFDF" ALIGN=RIGHT>+0,6%</TD></TR> <TR><TD BGCOLOR="#BBFFDF">FPÖ</TD><TD BGCOLOR="#BBFFDF" ALIGN=RIGHT>22,1%</TD><TD BGCOLOR="#BBFFDF" ALIGN=RIGHT>-0,4%</TD></TR> <TR><TD BGCOLOR="#BBFFDF">Grüne</TD><TD BGCOLOR="#BBFFDF" ALIGN=RIGHT>4,6%</TD><TD BGCOLOR="#BBFFDF" ALIGN=RIGHT>-2,7%</TD></TR> <TR><TD BGCOLOR="#BBFFDF">Liberales Forum</TD><TD BGCOLOR="#BBFFDF" ALIGN=RIGHT>5,3%</TD><TD BGCOLOR="#BBFFDF" ALIGN=RIGHT>-0,6%</TD></TR> </TABLE> </TD> </TR> </TABLE>

Zweispaltiger Text

Der Text für die beiden Spalten bildet den Inhalt zweier Datenzellen, die in der HTML-Source hintereinander stehen und jeweils eingeleitet werden durch:

<TD WIDTH=50% VALIGN=BASELINE>

Randbedingungen sind deshalb, daß ich selbst steuern muß, was links und was rechts steht, und folglich für den Textausgleich zwischen den Spalten selbst sorgen muß.

Die Spalten sollten auch nicht zu lang sein, da der Browser ja mit der Darstellung überhaupt erst anfangen kann, wenn der komplette Text der ersten Spalte (oder sogar aller) empfangen ist; außerdem wird das Scrollen beim Lesen irgendwann kompliziert.

Für spezielle Anwendungen kann eine solche Textdarstellung jedoch interessant sein. Bei Browsern ohne Tabellenunterstützung erscheint der Text einfach hintereinander.

Bild(er) und Text nebeneinander plaziert

Eine "einzeilige" Tabelle mit zwei Spalten garantiert eine sichere Methode, einen Text genau neben ein Bild zu plazieren.

Der Text ist mittels <TD VALIGN=MIDDLE> in die Mitte gerückt. Alternativ denkbar ist auch eine Anordnung oben (<TD VALIGN=TOP>) oder unten (<TD VALIGN=BOTTOM>).

Bernd Cappel, 18.12.1995; letzte Änderung: 19.9.2001, 30.9.1998, 10.3.1999
Erstellt für eine Lehrveranstaltung des URZ der HHU im Wintersemester 1995/96