thead & tbody

Wenn man möchte kann man seine Tabellen nun so belassen, aber wenn man seine Inhalte semantisch korrekt darstellen und strukturieren möchte, ist die Vorstellung des <thead> Elements notwendig. Das <thead> Element sorgt für vernünftige Spaltenüberschriften und sagt dem Browser was jede Spalte enthalten wird. Das <tbody> Element strukturiert den Inhalt, damit der Browser weißt was der wirkliche Inhalt einer Tabelle ist. Wenn wir das zuvor verwendete Beispiel noch einmal aufgreifen, sollten die <thead> und <tbody> Elemente wie folgt genutzt werden:

<table border="1" width="100%">
	<thead>
		<tr>
			<td>Row 1, cell 1</td>
			<td>Row 1, cell 2</td>
			<td>Row 2, cell 3</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Row 2, cell 1</td>
			<td>Row 2, cell 2</td>
			<td>Row 2, cell 3</td>
		</tr>
		<tr>
			<td>Row 3, cell 1</td>
			<td>Row 3, cell 2</td>
			<td>Row 3, cell 3</td>
		</tr>
		<tr>
			<td>Row 4, cell 1</td>
			<td>Row 4, cell 2</td>
			<td>Row 4, cell 3</td>
		</tr>
	</tbody>
</table>

Zusätzlich gibt es noch ein weiteres Element was ich hier vorstellen möchte -das <th> Element. Dieses Tag, was für table cell heading steht, wird statt des <td> Tags genutzt wenn der Inhalt der Zelle eine Überschrift ist und nicht die eigentlichen Daten beinhaltet.

Das heißt es ist die einzig logische Wahl innerhalb eines <thead> Elements (das die erste Zeile einer Tabelle umschließt, das th Element zu benutzen. Man kann das th Element aber auch auf der ersten Spalte einer Tabelle einsetzen als sogenannten table row header, oder auch Tabellenzeilenkopf.

Schauen wir uns ein Beispiel an, das sehr ähnlich zum vorherigen ist aber wo durch die Wahl des Inhaltes ein wenig deutlicher hervorgeht wie man das <th> Element nutzen sollte:

<table border="1" width="100%">
	<thead>
		<tr>
			<th>Fruits</th>
			<th>Vitamin A</th>
			<th>Vitamin C</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Apples</th>
			<td>98 ui</td>
			<td>8.4 mg</td>
		</tr>
		<tr>
			<th>Oranges</th>
			<td>295 ui</td>
			<td>69.7 mg</td>
		</tr>
		<tr>
			<th>Bananas</th>
			<td>76 ui</td>
			<td>10.3 mg</td>
		</tr>
	</tbody>
</table>

Wie man sieht, wenn man das Beispiel ausführt, sieht man keinen großen Unterschied. Das kommt daher weil thead, tbody und th nur semantisch eine Auswirkung haben. Aber man kann jederzeit CSS benutzen um die Tabelle entsprechend der eigenen Wünsche zu gestalten und eine semantisch korrekte Beschreibung vereinfacht dann vieles!