Tabellenkomponenten im HTML

Tabellen in HTML gestalten

Bevor wir den HTML-Code zum Erzeugen von Tabellen betrachten, hier einige Definitionen, sodass Sie wissen, wovon ich rede:

• Der Titel gibt an, um was es in der Tabelle geht. Titel sind optional.
• Tabellenüberschriften bilden die Namen für Spalten oder Zeilen oder beides. Tabellenüberschriften werden in der Regel größer oder hervorgehoben dargestellt, sodass sie sich von der restlichen Tabelle abheben. Tabellenüberschriften sind ebenfalls optional.
• Wie Sie Titel, Zeilen, Überschriften und Datenzellen erzeugen
• Tabellendaten stellen die eigentlichen Werte in der Tabelle dar. Die Kombination von Tabellenüberschriften und Tabellendaten bildet die gesamte Tabelle.
• Tabellenzellen sind die einzelnen Felder in der Tabelle. Eine Zelle kann normale Tabellendaten oder eine Tabellenüberschrift aufnehmen.

Abbildung zeigt eine typische Tabelle und ihre Komponenten.

Tabellenkomponenten im HTML

Das <table>-Tag

Um in  HTML eine Tabelle zu erzeugen, verwenden Sie die Tags <table> ... </table>, die den Code für eine Überschrift und den Inhalt der Tabelle selbst enthalten.

<table>
	... Tabelleninhalt ... 
</table>

Um zu demonstrieren, wie ein HTML-Code für eine komplette Tabelle aussieht, sehen Sie hier ein Code-Beispiel, das zur Erstellung der in Abbildung gezeigten Tabelle verholfen hat. Seien Sie nicht verunsichert, wenn Sie jetzt noch nicht so genau wissen, um was es sich eigentlich handelt. Merken Sie sich jetzt nur, dass der Code für die Tabelle mit einem <table>-Tag und seinen Attributen beginnt, und mit einem </table>-Tag endet.

<table border="1">
	<caption>Vital Statistics</caption>
	<tr>
		<th>Name</th>
		<th>Height</th>
		<th>Weight</th>
		<th>Eye Color</th>
	</tr>
	<tr>
		<td>Alison</td>
		<td>5'4"</td>
		<td>140</td>
		<td>Blue</td>
	</tr>
	<tr>
		<td>Tom</td>
		<td>6'0"</td>
		<td>165</td>
		<td>Hazel</td>
	</tr>
	<tr>
		<td>Susan</td>
		<td>5'1"</td>
		<td>97</td>
		<td>Brown</td>
	</tr>
</table>

Viel zu lange hatte das W3-Konsortium gar keine Tabellenauszeichnungen in HTML vorgesehen. Seit sich jedoch 1995 der revolutionäre Browser Netscape 1.1 über den damals aktuellen HTML-Standard 2.0 hinwegsetzte und erstmals Tabellen in HTML unterstützte, tat sich für all jene, die sich endlich mehr Freiheiten bei der Gestaltung von Webseiten wünschten, eine neue Tür auf. Vor allem die rahmenlosen Tabellen erlaubten es, Inhalte wie Navigation und Information attraktiv nebeneinander zu positionieren. Die so genannten Tabellenlayouts waren geboren.

Ganze Webdesigner-Generationen lernten, ins HTML-Grundgerüst gleich mal ein paar verschachtelte Tabellen einzubauen, um so das gewünschte Basislayout zu bestimmen. Es gab sogar renommierte WYSIWYG-Editoren, die am Bildschirm ein Zentimeterraster darstellten, in dem der Designer seine Webseiteninhalte frei positionieren konnte. Intern wurde das Raster dann als komplexe Tabelle aufgelöst. Der dabei entstehende HTML-Code war für Menschen kaum noch genießbar und hatte mit der ursprünglichen Idee von HTML nicht mehr viel zu tun.

Aus moderner Sicht sind solche Art von Tabellenlayouts längst verpönt. Es spricht zwar nichts dagegen, für nebeneinander darzustellende Informationen auch mal eine rahmenlose Tabelle zu verwenden, etwa, wenn ein Bild mit nebenstehendem Text dargestellt werden soll, oder ein Formular mit ordentlich untereinander stehenden Feldern und unterschiedlich langen Feldbeschriftungen davor. Doch Tabellen wie selbstverständlich als Basis für die grundsätzliche Informationsverteilung auf einer Seite einzusetzen, ist keine saubere Praxis mehr. Dazu gibt es mittlerweile in CSS die Möglichkeit, beliebige Elemente und Bereiche wie gewünscht zu positionieren und zueinander anzuordnen. Auf die Details dazu werden wir in Zusammenhang mit CSS eingehen.

Gewöhnen Sie sich also an, Tabellen nur für tabellarische Informationen zu verwenden und rahmenlose Tabellen für nebeneinander darzustellende Informationen nur für sinnvolle Einzelfälle innerhalb einer Webseite, jedoch nicht als Basis für das gesamte Seitenlayout.

Aufbau einer Tabelle

Das nachfolgende Quelltextbeispiel zeigt eine kleine Tabelle:

<table border="1">
	<caption>Vital Statistics</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Eye Color</th>
		</tr>
	</thead>
	<tfoot> 
	<tr>
		<td>beliebt</td>
		<td>weniger beliebt</td>
	</tr>
	</tfoot> 
	<tbody>
		<tr>
			<td>Alison</td>
			<td>Blue</td>
		</tr>
		<tr>
			<td>Tom</td>
			<td>Hazel</td>
		</tr>
	</tbody>
</table>

Tabellenkomponenten im HTML

Eine vollständige Tabelle in HTML besteht aus einer Tabellenüberschrift, einem Tabellenkopf, einem Tabellenkörper und einem Tabellenfuß. Die gesamte Tabelle wird in die Tags <table> bzw. </table> eingeschlossen. Soll die Tabelle einen sichtbaren Rahmen und ein sichtbares Gitternetz haben, müssen Sie im einleitenden Tag das Attribut border="1" notieren (die Zahl steht für die Rahmendicke in Pixel; für dickere Rahmen können Sie also auch einen höheren Wert angeben). Fehlt dieses Attribut, bleiben alle Ränder der Tabelle unsichtbar. Die etwas klobig wirkende Default-Darstellung von Rahmen und Gitternetz im Browser, wie in der Abbildung zu sehen, können Sie später mithilfe von CSS beeinflussen.

Betrachten wir nun den internen Aufbau der Tabelle. Die Tabellenüberschrift, markiert durch <caption> ... </caption>, muss direkt innerhalb von <table> ... </table> notiert werden, am besten direkt nach dem einleitenden <table>-Tag. Die Tabellenüberschrift kann Text und andere Inline-Elemente enthalten. Selbstverständlich lässt sie sich später mithilfe von CSS formatieren und auch im Verhältnis zur Tabelle genau ausrichten und positionieren.

Die drei Bereiche für Tabellenkopf, Tabellenfuß und Tabellenkörper werden durch <thead> ... </thead>, <tfoot> ... </tfoot> und <tbody> ... </tbody> markiert. Beachtenswert ist die Reihenfolge der Notation von Tabellenkopf, Tabellenfuß und Tabellenkörper in eben dieser Reihenfolge. Obwohl die Fußdaten am Ende der Tabelle erscheinen, müssen sie vor den Daten des Tabellenkörpers notiert werden!

Falls Sie eine Tabelle erstellen möchten, dabei aber weder eine Tabellenüberschrift wünschen noch explizit zwischen Tabellenkopf, Tabellenfuß und Tabellenkörper unterscheiden möchten, können Sie beruhigt sein: Es ist durchaus erlaubt, all diese Elemente wegzulassen und nur die Elemente zum Definieren von Reihen und darin enthaltenen Zellen zu notieren. Bedenken Sie jedoch, dass vor allem im Fall von komplexen Tabellen, bei denen sich z.B. bereits der Kopfbereich über mehrere Zeilen erstreckt, die explizite Unterscheidung der Tabellenteile im Markup durchaus sinnvoll sein kann. Immerhin können Sie auch für diese Elemente eigene CSS-Formatierungen definieren.

Noch wichtiger aber sind die entsprechenden Auszeichnungen in Hinblick auf eine rein akustische Ausgabe der Webseite, wie etwa stark Sehbehinderte sie zum Surfen im Web benutzen. Weiter unten werden wir noch genauer auf diese Problematik eingehen. Die Tabelle aus dem obigen Beispiel darf jedenfalls auch wie folgt aussehen und wäre dennoch korrektes HTML:

										
<table border="1">
	<tr>
		<th>Name</th>
		<th>Eye Color</th>
	</tr>
	<tr>
		<td>Alison</td>
		<td>Blue</td>
	</tr>
	<tr>
		<td>Tom</td>
		<td>Hazel</td>
	</tr>
	<tr>
		<td>beliebter</td>
		<td>weniger beliebt</td>
	</tr>
</table>
										
										

Tabellenkomponenten im HTML

In dieser Variante der Tabelle fehlen die Auszeichnungen für Tabellenüberschrift, Tabellenkopf, Tabellenkörper und Tabellenfuß. Die semantische Information zum Tabellenfuß geht dabei komplett verloren. Die Tabellenzeile, die in der Variante zuvor als Tabellenfuß ausgezeichnet wurde, wird nun einfach unten als letzte Zeile notiert. Die Kopfinformationen sind dagegen erhalten geblieben, wofür das th-Element verantwortlich ist.

Doch der Reihe nach: Tabelleninhalte werden in HTML Tabellenzeile für Tabellenzeile notiert. Jede Tabellenzeile wird durch <tr> eingeleitet und endet mit </tr> – tr steht für table row (zu Deutsch: Tabellenzeile). Zwischen <tr> und </tr> werden jeweils die Spalten in der betreffenden Zeile notiert, also die Tabellenzellen dieser Tabellenzeile. Es gibt zwei Arten, nämlich Kopf- und Datenzellen. Kopfzellen werden durch <th> ... </th> markiert und Datenzellen durch <td> ... </td>. Dabei steht th für table head (zu Deutsch: Tabellenkopf) und td für table data (zu Deutsch: Tabellendaten).

Mit th ausgezeichnete Zellen werden in den meisten Browsern optisch anders dargestellt als td-Zellen – in der Regel erscheinen Kopfzellen zentriert und in Fettschrift, während Datenzellen linksbündig und mit normalem Schriftgewicht dargestellt werden. Auch hier gilt wieder: Stören Sie sich nicht an den Default-Formatierungen. Mithilfe von CSS werden Sie später alle Zellen, Zellen eines bestimmten Typs oder einzelne Zellen nach Wunsch formatieren, ausrichten usw. können.

In unserem einfachen Beispiel enthalten die einzelnen Tabellenzellen für Kopfdaten und Tabellendaten nichts als kurzen Textinhalt. HTML-Tabellen sind jedoch sehr mächtig. Jede einzelne Tabellenzelle darf neben reinem Text auch beliebige Block- und Inline-Elemente enthalten, also strukturierte Bereiche, überschriften, Listen und Textabsätze, Bild- und Multimediareferenzen und sogar komplette weitere Tabellen!