Gruppieren und Ausrichten von Spalten in HTML-Tabellen

Tabellenspalten mit den <colgroup>- und <col>-Elementen

Einer der größten Fortschritte in HTML 4.0 ist die Möglichkeit, Tabellen inkrementell laden zu können. Das heißt Teile der Tabelle können angezeigt werden, auch wenn noch nicht die gesamten Tabellendaten geladen wurden. Man kann nun auch Tabellenspalten mit den <colgroup>- und <col>-Elementen definieren. Diese Elemente ermöglichen dem Autor strukturelle Unterteilungen der Tabellenspalten, deren Aussehen mit Style-Sheet-Eigenschaften verbessert werden kann.

Das <colgroup> ... <colgroup>-Element wird zum Gruppieren einer oder mehrerer Spalten verwendet. Das abschließende </colgroup>-Tag ist nicht zwingend notwendig. Dieses Element hat zwei Attribute:

• span definiert die Spaltenanzahl der Spaltengruppe. Der Wert muss ein Integer, der größer als 0 ist, sein. Wenn span nicht definiert ist, wird die Standardeinstellung des <colgroup>-Elements aktiv und erstellt eine Spaltengruppe, die eine Spalte enthält. Wenn das <colgroup>-Element ein oder mehrere <col>-Elemente enthält (die etwas später erklärt werden), wird das span-Attribut jedoch ignoriert.
• width definiert die Spaltenbreite einer jeden Spalte aus der Spaltengruppe. Die Breite kann in Pixeln, Prozenten und Relativwerten definiert werden. Sie können auch einen speziellen Breitenwert mit "0*" (nach der 0 folgt ein Sternchen) erstellen. Dieser Wert spezifiziert die Spaltenbreite einer jeden Spalte in der Spaltengruppe. Somit ist der Spaltenwert der Minimalwert, der für das richtige Anzeigen des Inhalts einer jeden Spaltenzelle verantwortlich ist. Wenn sie den "0*"-Wert jedoch spezifizieren, können Browser keine Inkrementellspalte erstellen.

<table border="1" width="450">
	<colgroup span="6" width="75">
	</colgroup>

Nehmen wir an, Sie möchten die Spalten jetzt ändern. Verwenden Sie dieselbe 450 Pixel breite Tabelle, erstellen Sie die beiden ersten Spalten jeweils mit einer Breite von 25 Pixeln, und die letzten beiden Spalten mit einer Breite von 100 Pixeln. Dazu benötigen Sie, wie im folgenden Beispiel gezeigt wird, zwei <colgroup>-Elemente:

<table border="1" width="450">
	<colgroup span="2" width="25">
	</colgroup>
	<colgroup span="4" width="100">
	</colgroup>

Was ist, wenn Ihnen diese Spalten als Spaltengruppe, in der alle Spalten dieselbe Breite oder dasselbe Aussehen haben, gar nicht gefallen? Das ist nun eine Aufgabe für das <col>-Element. Während <colgroup> die Struktur der Tabellenspalten definiert, definiert <col> ihre Attribute. Um dieses Element zu verwenden, beginnen Sie die Spaltendefinition mit einem <col>-Tag. In diesem Fall ist das abschließende Tag verboten.

Kommen wir zurück zu unserer 450 Pixel breiten Tabelle, in der Sie jetzt die beiden Tabellen in der ersten Gruppe mit jeweils 75 Pixeln formatieren möchten. In der zweiten Spaltengruppe haben Sie 50, 75, 75, 100 Pixel breite Spalten. Im folgenden Beispiel sehen Sie, wie Sie die zweite Spaltengruppe mit dem <col>-Tag formatieren:

<table border="1" width="450">
	<colgroup span="2" width="75">
	</colgroup>
	<colgroup>
		<col span="1" width="50">
		<col span="2" width="75">
		<col span="1" width="100">
	</colgroup>

Lassen Sie uns das ganze mal praktisch anwenden. Im folgenden Beispiel sehen Sie eine Tabelle, die den Stundenplan für verschiedene Naturwissenschaftliche Fächer zeigt. Definieren Sie als Erstes eine Tabelle, die ein 1 Pixel breite Rahmen umgibt, und die 100% der Browserfensterbreite einnimmt.

Definieren Sie als nächstes die Spaltengruppen in der Tabelle.

In der ersten Spaltengruppe sollen die verschiedenen Fachnamen angezeigt werden. Die zweite Spaltengruppe besteht aus zwei Spalten, die die Nummer der jeweiligen Unterrichtsräume und die Uhrzeit der Unterrichtsstunden anzeigt. Das align-und das valign-Attribut, die Sie bereits kennen gelernt haben, wurden von HTML 4.0 für col- und colgroup-Elemente nicht verworfen. So können Sie den Vorteil hier nutzen. Die erste Spaltengruppe besteht aus einer Zellenspalte, die 20% der Tabelle einnimmt. Der Inhalt der Zellen wird nach oben hin vertikal ausgerichtet und horizontal zentriert. Die zweite Spaltengruppe besteht aus zwei Spalten, die jeweils 40% der Tabelle einnehmen. Der Inhalt dieser Spalten wird zu den Zellen nach oben hin vertikal ausgerichtet.

Geben Sie schließlich die Tabellendaten, genauso wie Sie es bis jetzt gehandhabt haben, ein. Sie sehen im folgenden Beispiel, wie der komplette Code für den Stundenplan aussieht. Das Ergebnis im Safari sehen Sie in der Abbildung:

<html>
<head>
	<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<table border="1" width="100%" summary="grouping columns">
	<caption><b>Gruppieren und Ausrichten von Spalten</b></caption>
	<colgroup width="20%" align="center" valign="top">
	</colgroup>
	<colgroup span="2" width="40%" valign="top">
	</colgroup> 
	<tr>
		<th>Class</th>
		<th>Room</th>
		<th>Time</th>
	</tr>
	<tr>
		<td>Biology</td>
		<td>Science Wing, Room 102</td>
		<td>8:00 AM to 9:45 AM</td>
	</tr>
	<tr>
		<td>Science</td>
		<td>Science Wing, Room 110</td>
		<td>9:50 AM to 11:30 AM</td>
	</tr>
	<tr>
		<td>Physics</td>
		<td>Science Wing, Room 107</td>
		<td>1:00 PM to 2:45 PM</td>
	</tr>
	<tr>
		<td>Geometry</td>
		<td>Mathematics Wing, Room 236</td>
		<td>8:00 AM to 9:45 AM</td>
	</tr>
	<tr>
		<td>Algebra</td>
		<td>Mathematics Wing, Room 239</td>
		<td>9:50 AM to 11:30 AM</td>
	</tr>
	<tr>
		<td>Trigonometry</td>
		<td>Mathematics Wing, Room 245</td>
		<td>1:00 PM to 2:45 PM</td>
	</tr>
</table>
</body>
</html>

Gruppieren und Ausrichten von Spalten in HTML-Tabellen