Tabellen & Listen

Um große Datenmengen geordnet darstellen zu können greift man am Besten auf Tabellen zurück. Eine HTML Tabelle besteht aus Zeilen und Spalten, jedoch muss man dies ein wenig umständiger schreiben.
Das Prinzip zum Vorgehen beim Erstellen einer Tabelle ist etwa wie folgendes:
Zuerst eine Skizze, in der man den Aufbau der Tabelle sehen kann. Zuerst die Anzahl der Tabellenzeilen, diese werden dann wie folgt definiert:
Hier am Beispiel mit 3 Tabellenzeilen

01 <table>
02 	<tr></tr>
03 	<tr></tr>
04 	<tr></tr>
05 </table>

Nun wird die Tabelle vervollständigt, wenn es z.B. 2 Spalten sind bedeutet das in HTML, dass es pro Zeile zwei Zellen sind. Definiert wird das so:

01 <table>
02 	<tr>
03 		<td></td>
04 		<td></td>
05 	</tr>
06 	<tr>
07 		<td></td>
08 		<td></td>
09 	</tr>
10 	<tr>
11 		<td></td>
12 		<td></td>
13 	</tr>
14 </table>

Erklärung: Jede Tabellenzelle muss innerhalb einer Tabellenreihe (tr / table row) sein. Eine Tabellenreihe kann jedoch mehrere Tabellenzellen haben. In diesem Beispiel hat jede Reihe zwei Zellen.
Wenn die Zellen und Zeilen definiert sind, wird dies von einem table-Tag umschlossen um dem Browser zu zeigen, dass es sich um eine Tabelle handelt.

Letzten Endes sind es die Tabellenzellen (td) in denen der Inhalt steht. Hier ein Beispiel:

01 <table>
02 	<tr>
03 		<td>1. Zelle in der 1. Zeile</td>
04 		<td>2. Zelle in der 1. Zeile</td>
05 	</tr>
06 	<tr>
07 		<td>1. Zelle in der 2. Zeile</td>
08 		<td>2. Zelle in der 2. Zeile</td>
09 	</tr>
10 	<tr>
11 		<td>1. Zelle in der 3. Zeile</td>
12 		<td>2. Zelle in der 3. Zeile</td>
13 	</tr>
14 </table>

Ergebnis:

1. Zelle in der 1. Zeile	2. Zelle in der 1. Zeile
1. Zelle in der 2. Zeile	2. Zelle in der 2. Zeile
1. Zelle in der 3. Zeile	2. Zelle in der 3. Zeile

Die Breite der Zellen ist flexibel, nimmt der Inhalt der einen Zelle zu, so wächst diese und die gesamte Spalte mit Ihr.

Wenig Inhalt	Viel mehr Inhalt
Wein wenig Inhalt	Viel mehr Inhalt als oben

Tabellenrahmen

Das border-Attribut (Rahmenattribut) definiert den Tabellenrand, border="0" bewirkt unsichtbare Tabellenränder

01 <table border="0">
02 	<tr>
03 		<td>Tag</td><td>Besucher</td>
04 	</tr>
05 	<tr>
06 		<td>Montag</td><td>134</td>
07 	</tr>
08 	<tr>
09 		<td>Dienstag</td><td>144</td>
10 	</tr>
11 	<tr>
12 		<td>Mittwoch</td><td>173</td>
13 	</tr>
14 </table>

Ergebnis:

Tag	Besucher
Montag	134
Dienstag	144
Mittwoch	173

Tabellenausrichtung

Eine Tabelle kann mit Hilfe des align-Attributs horizontal ausgerichtet werden, left;center;right sind Werte die eingesetzt werden können.

Tag	Besucher
Montag	134
Dienstag	144
Mittwoch	173

<table align="center">

Zellen verbinden

Zellen horizontal verbinden
Hier ein Beispiel wie die zwei ersten Zellen verbunden werden können. colspan="2" bedeutet, dass sich die Zelle wie zwei verhält. Die nachfolgende Zelle muss dafür gelöscht werden. So hat die obere Tabellenreihe 2 Zellen und die untere 3.

1. Zelle in der 1. Zeile		2. Zelle in der 1. Zeile
1. Zelle in der 2. Zeile	2. Zelle in der 2. Zeile	3. Zelle in der 2. Zeile

01 <table>
02 	<tr>
03 		<td colspan="2">1. Zelle in der 1. Zeile</td>
04 		<td>2. Zelle in der 1. Zeile</td>		
05 	</tr>
06 	<tr>
07 		<td>1. Zelle in der 2. Zeile</td>
08 		<td>2. Zelle in der 2. Zeile</td>
09 		<td>3. Zelle in der 2. Zeile</td>		
10 	</tr>
11 </table>

Zellen vertikal verbinden
Das gleiche wie beim Verbinden horizontaler Zellen, nur eben in die andere Dimension.

1. Zelle in der 1. Zeile	2. Zelle in der 1. Zeile	3. Zelle in der 1. Zeile
1. Zelle in der 2. Zeile	2. Zelle in der 1. Zeile	2. Zelle in der 2. Zeile

01 <table>
02 	<tr>
03 		<td>1. Zelle in der 1. Zeile</td>
04 		<td rowspan="2">2. Zelle in der 1. Zeile</td>		
05 		<td>3. Zelle in der 1. Zeile</td>		
06 	</tr>
07 	<tr>
08 		<td>1. Zelle in der 2. Zeile</td>
09 		<td>2. Zelle in der 2. Zeile</td>		
10 	</tr>
11 </table>

zurück