Gruppieren und Ausrichten von Zeilen in HTML-Tabellen

Tabellen-Zeilen mit <thead>, <tfoot> und <tbody>

Da Sie jetzt wissen, wie man  Spalten gruppiert und formatiert, lassen Sie uns jetzt zu den Zeilen kommen; Tabellenkopf, Tabellenfuß und Tabellenrumpf. So gibt es Vorteile beim Betrachten der Seite in einem HTML 4.0 Compliant Browser. Erstens kann der Tabellenrumpf unabhängig von Kopf und Fuß der Tabelle scrollen. Ein weiterer Vorteil ist, dass beim Ausdruck der Tabelle, die auf mehrere Seiten verteilt sein kann, der Tabellenkopf und die Fußzeile der Tabelle auf jeder Seite erneut ausgedruckt wird. Sie können auch Cascading-Style-Sheet-Eigenschaften anwenden, um Tabellenkopf und -fuß hervorzuheben und dem Tabellen-Body ein anderes Aussehen zu verleihen. Die Tabellenkopf, Fuß- und Rumpfabschnitte werden mit thead, tfoot und tbody-Elementen jeweils definiert. Jedes dieser einzelnen Elemente muss dieselbe Spaltenanzahl haben.

Das <thead> ... </thead>-Element definiert den Tabellenkopf, der Informationen über die Rumpfspalten in der Tabelle enthalten sollte. Es handelt sich hierbei um denselben Informationstyp, den Sie heute schon in die Kopfzellen eingegeben haben. Das einleitende <thead>-Tag ist immer erforderlich, wenn Sie einen Kopfabschnitt in Ihre Seite einfügen möchte, während das abschließende </thead>-Tag optional ist.

Der Tabellenkopf muss mindestens eine Spaltengruppe enthalten, die vom <tr>-Element definiert wird. Der Tabellenkopf wird folgendermaßen formatiert:

<table border="1" width="100%">
	<caption><b>Gruppieren und Ausrichten von Zeilen</b></caption>
	<colgroup width="20%" align="center" valign="top">
	<colgroup span="2" width="40%" valign="top"> 
	<thead>
		<tr>
			<th>Class</th>
			<th>Room</th>
			<th>Time</th>
		</tr>
	</thead>
</table>

Das <tfoot> ... </tfoot>-Element definiert den Tabellenfuß. Das einleitende <tfoot>- Tag ist immer obligatorisch, wenn der Tabellenfuß definiert wird. Der Tabellenfuß erschient direkt nach dem Tabellenkopf (wenn einer vorhanden ist), oder nach dem <table>-Element (wenn kein Tabellenkopf vorhanden ist). Der Tabellenfuß muss mindestens eine Querspaltengruppe enthalten, die vom <tr>-Element definiert wird. Ein gutes Informationsbeispiel, das Sie in den Tabellenfuß platzieren könnten, ist eine Querspalte, die Zahlenspalten der Tabelle enthält.

Sie müssen den Tabellenfuß vor dem Tabellenrumpf erstellen.

Der Grund dafür ist, dass der Browser die Fußtabelle anzeigen muss, bevor er alle Daten in den Tabellenrumpf platziert. Geben Sie im folgenden Beispiel die gleiche Information im Tabellenkopf und im Tabellenfuß ein. Der Code sieht folgendermaßen aus:

<tfoot>
<tr>
  <th>Class</th>
  <th>Room</th>
  <th>Time</th>
</tr>
</tfoot>

Nachdem Sie Tabellenkopf und -fuß erstellt haben, definieren Sie die Zeilen im Tabellenrumpf. Eine Tabelle kann mehr als einen Rumpf enthalten, und jeder Rumpf eine oder mehrere Datenzeilen. Sind Sie verwirrt, fragen Sie sich, wie das nur funktionieren soll und wie Sie es verwenden sollen? Ich zeige Ihnen ein Beispiel, das demonstriert, warum das Ganze auch irgendwie cool ist.

Das <tbody> ... </tbody>-Element definiert ein oder mehrere Tabellenbodys in Ihrer Tabelle.

Das einleitende <tbody>-Tag ist obligatorisch, wenn mindestens einer der folgenden Fälle eintrifft:

• Die Tabelle enthält Kopf-oder Fußabsätze
• Die Tabelle enthält mehr als einen Tabellenbody

Das folgende Beispiel zeigt zwei Tabellenrümpfe. Jeder Tabellenrumpf besteht aus drei Zeilen, die jeweils drei Zellen enthalten. Der Rumpf befindet sich im Code hinter dem Tabellenfuß, wie Sie im folgenden Beispiel erkennen können:

<table>
<tbody>
	<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>
</tbody>
<tbody>
	<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>
</tbody>
</table>

Fügen Sie nun alles zusammen, und Sie erhalten eine Tabelle, wie sie in der Abbildung gezeigt wird.

Gruppieren und Ausrichten von Zeilen in HTML-Tabellen