Tabellen

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 ein Beispiel mit 3 Tabellenzeilen:

<table>
	<tr></tr>
	<tr></tr>
	<tr></tr>
</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:

<table>
	<tr>
		<td></td>
 		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</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:

<table>
	<tr>
		<td>1. Zelle in der 1. Zeile</td>
		<td>2. Zelle in der 1. Zeile</td>
	</tr>
	<tr>
		<td>1. Zelle in der 2. Zeile</td>
		<td>2. Zelle in der 2. Zeile</td>
	</tr>
	<tr>
		<td>1. Zelle in der 3. Zeile</td>
		<td>2. Zelle in der 3. Zeile</td>
	</tr>
</table>

Ergebnis:

1. Zelle in der 1. Zeile2. Zelle in der 1. Zeile
1. Zelle in der 2. Zeile2. Zelle in der 2. Zeile
1. Zelle in der 3. Zeile2. 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 InhaltViel mehr Inhalt
Wenig InhaltViel mehr Inhalt als in der obigen Zelle und somit breiter

Tabellenrahmen

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

<table border="0">
	<tr>
		<td>Tag</td><td>Besucher</td>
	</tr>
	<tr>
		<td>Montag</td><td>134</td>
	</tr>
	<tr>
		<td>Dienstag</td><td>144</td>
	</tr>
	<tr>
		<td>Mittwoch</td><td>173</td>
	</tr>
</table> 	

 

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. Zeile2. Zelle in der 1. Zeile
1. Zelle in der 2. Zeile2. Zelle in der 2. Zeile3. Zelle in der 2. Zeile
<table>
	<tr>
		<td colspan="2">1. Zelle in der 1. Zeile</td>
		<td>2. Zelle in der 1. Zeile</td>		
	</tr>
	<tr>
		<td>1. Zelle in der 2. Zeile</td>
		<td>2. Zelle in der 2. Zeile</td>
		<td>3. Zelle in der 2. Zeile</td>		
	</tr>
</table>

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

1. Zelle in der 1. Zeile2. Zelle in der 1. Zeile3. Zelle in der 1. Zeile
1. Zelle in der 2. Zeile2. Zelle in der 2. Zeile

 

<table>
	<tr>
		<td>1. Zelle in der 1. Zeile</td>
		<td rowspan="2">2. Zelle in der 1. Zeile</td>		
		<td>3. Zelle in der 1. Zeile</td>		
	</tr>
	<tr>
		<td>1. Zelle in der 2. Zeile</td>
		<td>2. Zelle in der 2. Zeile</td>		
	</tr>
</table>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.