Ein weiteres Strukturierungsmittel in HTML-Dokumenten sind Tabellen. Dafür steht der <table>-Tag zur Verfügung. Zwischen Start- und Endtag wird die Tabelle dann zeilenweise angegeben. Dafür wird widerum der <tr>-Tag benutzt. Innerhalb der Zeilen werden dann schließlich die einzelnen Zellen mit dem <td>-Tag definiert.

Das folgende Quelltext-Beispiel zeigt eine einfache Tabelle, durch die wir das vorherige Listenbeispiel dahingehend variieren, dass wir zu den verschiedenen Obstsorten noch jeweils eine Menge mit angeben, die für unseren Obstsalat benötigt wird.

<table>
	<tr>
		<td>Himbeeren</td>
		<td>400g</td>
	</tr>
	<tr>
		<td>Trauben</td>
		<td>800g</td>
	</tr>
	<tr>
		<td>Mangos</td>
		<td>4 Stück</td>
	</tr>
	<tr>
		<td>Limetten</td>
		<td>2 Stück</td>
	</tr>
</table>

Möchte man der Tabelle eine Kopfzeile geben (wie es in vielen Fällen sinnvoll ist), dann sollte man das auch mit dem entsprechenden HTML-Code deutlich machen, damit z.B. Suchmaschinen erkennen, dass es sich um eine Kopfzeile handelt. Dazu dient der <thead>-Tag. Obiges Beispiel könnte folgendermaßen ergänzt werden:

<table>
	<thead>
		<tr>
			<th>Obstsorte</th>
			<th>Menge</th>
		</tr>
	</thead>
	<tr>
		<td>Himbeeren</td>
		<td>400g</td>
	</tr>
	<tr>
		<td>Trauben</td>
		<td>800g</td>
	</tr>
	<tr>
		<td>Mangos</td>
		<td>4 Stück</td>
	</tr>
	<tr>
		<td>Limetten</td>
		<td>2 Stück</td>
	</tr>
</table>

In der Kopfzeile verwendet man üblicherweise auch den <th>-Tag statt des <td>-Tags für die einzelnen Zellen.

Genau wie eine Kopfzeile kann man einer Tabelle auch eine Fußzeile geben mit dem <tfoot>-Tag. Diese kann z.B. verwendet werden, wenn man in der letzten Zeile einer Tabelle die Zahlen aus den oberen Zeilen addiert.

Aufgaben

  1. Erstelle ein HTML-Dokument mit den obigen Tabellen und betrachte es im Webbrowser.
  2. Erstelle ein HTML-Dokument mit einer eigenen Tabelle. Die Tabelle soll eine Kopf- und eine Fußzeile haben. Sie soll eine Übersicht über ein fiktives Einkommen während der ersten drei Kalendermonate geben. Dabei sollen die verschiedenen Monate untereinander stehen. In der Fußzeile soll die Summe des Einkommens stehen.