Tabellen

Tabellen werden in HTML mit dem table-Element definiert. Innerhalb der Tabelle können wir mit Hilfe von tr-Elementen (table row) Tabellenzeilen hinzufügen. Mit td-Elementen (table data) können wir Tabellenzellen erstellen. td-Elemente werden innerhalb von tr-Elementen platziert. Darauf ist zu achten, dass alle Spalten gleich viele Zellen enthalten. An Stelle des td-Elements kann auch das th-Element (table header) verwendet werden. Dieses stellt eine Kopfzelle dar, welche z. B. als Überschrift für eine Tabellenspalte genutzt werden kann. Kopfzellen werden, im Gegensatz zu normalen Zellen, fett gedruckt und dessen Text wird zentriert. Natürlich kann auch diese Voreinstellung mittels CSS geändert werden. Alle weiteren Formatierungen müssen (falls diese gewünscht sind) ebenfalls mit Hilfe CSS durchgeführt werden.

<table>
	<tr>
		<th>Name</th>
		<th>Durchwahl</th>
	</tr>
	<tr>
		<td>Hr. Pfeifer</td>
		<td>15</td>
	</tr>
	<tr>
		<td>Fr. Schneider</td>
		<td>30</td>
	</tr>
	<tr>
		<td>Hr. Müller</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Fr. Koch</td>
		<td>32</td>
	</tr>
</table>

Überschrift

Über das caption-Element können wir unserer Tabelle eine Überschrift geben. Dieses Element muss direkt nach dem öffnenden Tag des table-Elements folgen und darf pro Tabelle nur einmal vorkommen. Jedoch ist es auch erlaubt, das caption-Element wegzulassen. Zwischen den Tags des caption-Elements notieren wir die anzuzeigende Überschrift. Die Überschrift erstreckt sich dabei über die komplette Breite der Tabelle bzw. über alle Spalten.

<table>
	<caption>Durchwahlliste</caption>
	<tr>
		<th>Name</th>
		<th>Durchwahl</th>
	</tr>
	<tr>
		<td>Hr. Pfeifer</td>
		<td>15</td>
	</tr>
	<tr>
		<td>Fr. Schneider</td>
		<td>30</td>
	</tr>
	<tr>
		<td>Hr. Müller</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Fr. Koch</td>
		<td>32</td>
	</tr>
</table>

Kopf, Inhalt und Fuß

Um eine Tabelle in die drei Hauptbestandteile (Kopf, Körper und Fuß) zu teilen, können wir die Elemente thead, tbody und tfoot verwenden. Alle Elemente müssen dabei am Anfang der Tabelle notiert werden (direkt nach dem table-Tag oder falls vorhanden dem caption-Element) und müssen in folgender Reihenfolge auftreten: thead, tfoot, tbody. Die reale Anzeige der Tabelle erfolgt jedoch nach der Reihenfolge thead, thead und tfoot. Dabei kann natürlich das thead- oder tfoot-Element weggelassen werden, wenn dieses nicht benötigt wird. Die tr-Elemente werden bei Verwendung dieser Gliederung nicht mehr direkt innerhalb der table-Tags platziert, sondern zwischen den thead-, tbody und tfoot-Tags.

<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Durchwahl</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Amt</td>
			<td>0</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Hr. Pfeifer</td>
			<td>15</td>
		</tr>
		<tr>
			<td>Fr. Schneider</td>
			<td>30</td>
		</tr>
		<tr>
			<td>Hr. Müller</td>
			<td>20</td>
		</tr>
		<tr>
			<td>Fr. Koch</td>
			<td>32</td>
		</tr>
	</tbody>
</table>

Zellen zusammenführen

Wie in Programmen wie z. B. Microsoft Excel ist es auch mittels der HTML-Tabellen möglich, Zellen vertikal oder horizontal zu verbinden. Hierfür müssen wir in der Zelle (td- oder th-Element), welche mit anderen verbunden werden soll, das Attribut rowspan oder colspan notieren. rowspan (row = Zeile) gibt an, über wie viele Zeilen sich die Zelle erstrecken soll. colspan (col = column = Spalte) gibt hingegen an, über wie viele Spalten sich die Zelle erstreckt. Das Wort span in colspan und rowspan kommt aus der englischen Sprache und heißt so viel wie „spannen“. Man könnte also sagen, mit Hilfe der zwei Attribute wird eine Zelle überspannt. Der Standardwert von colspan und rowspan ist 1. Die Angabe der Attribute mit dem Wert 1 ist nicht notwendig und sorgt nur für einen längeren HTML-Code.

Wichtig ist, dass wenn wir z. B. eine Tabelle mit 3 Spalten haben und sich die 1. Zelle über 2 Zellen erstrecken soll (colspan="2"), dass sich dann lediglich zwei td-Elemente innerhalb des tr-Elements befinden dürfen. Das Beispiel und die nebenstehende Grafik wird die Erklärung des Textes verdeutlichen.

<table>
	<tr>
		<th>Name</th>
		<th>Durchwahl</th>
	</tr>
	<tr>
		<td>Hr. Pfeifer</td>
		<td>15</td>
	</tr>
	<tr>
		<td>Fr. Schneider</td>
		<td>30</td>
	</tr>
	<tr>
		<td rowspan="2">Hr. Müller</td>
		<td>20</td>
	</tr>
	<tr>
		<td>32</td>
	</tr>
	<tr>
		<td colspan="2"><i>Keine 0 vorwählen!</i></td>
	</tr>
</table>

Früher wurden Tabellen unter anderem auch dazu verwendet, Webseiten zu designen. Diese Technik gilt als veraltet und sollte nicht mehr eingesetzt werden, da das Design einer Seite vollständig über CSS erfolgen soll.