Tabellen

Verwendung
von Tabellen

Der Webdesigner verwendet Tabellen nicht nur zum Anzeigen von Daten in tabellarischer Form, sondern vielmehr zur Ausrichtung von Daten. Wenn kein Rahmen angezeigt wird, spricht man von so genannten "blinden" Tabellen.

Tabellen bieten sich zur Ausrichtung an, weil:

Breite und Höhe der Zeilen und Spalten pixelgenau definiert werden können
Tabellenfelder Container für viele weitere Container sein können (Bilder, Text ...)
fast jeder Browser Tabellen darstellen kann
das Aussehen von Tabellen sehr genau definierbar ist (Hintergrundgrafik ...)

Aufbau einer Tabelle

<table>	leitet eine Tabelle ein
<tr>	definiert eine Tabellenzeile
<td> \| <th>	definiert eine Datenzelle:
	<td> steht für Tabledata und definiert eine Standard-Tabellenzelle. <th> steht für Tablehead, eine Datenzelle, deren Inhalt betont wird (z. B. für Überschriften)

<table>

<tr>
<th>Kopfzelle: 1. Zeile, 1. Spalte</th>
<th>Kopfzelle: 1. Zeile, 2. Spalte</th>
<th>Kopfzelle: 1. Zeile, 3. Spalte</th>
</tr>

<tr>
<td>Datenzelle: 2. Zeile, 1. Spalte</td>
<td>Datenzelle: 2. Zeile, 2. Spalte</td>
<td>Datenzelle: 2. Zeile, 3. Spalte</td>
</tr>

<tr>
<td>Datenzelle: 3. Zeile, 1. Spalte</td>
<td>Datenzelle: 3. Zeile, 2. Spalte</td>
<td>Datenzelle: 3. Zeile, 3. Spalte</td>
</tr>

</table>

gleich ausprobieren ...

Breite und Höhe

Die Breite (width=) und Höhe (height=) für die gesamte Tabelle wird im einleitenden <table>-Tag, die Zeilenhöhe im einleitenden <tr>-Tag oder in einem <th>/<td>-Tag (gilt dann für gesamte Zeile), die Spaltenbreite in einem <th>/<td>-Tag (gilt dann für alle Zellen dieser Spalte) angegeben. Angaben sind in Pixel oder Prozent erlaubt.

<table border width="x" height="y">

<tr height="x">
<th width="x" height="x">Zelle</th>
<td width="x" height="x">Zelle</td>
</tr>

</table>

Ausrichtung

Horizontale Ausrichtung
Horizontale Ausrichtung (align) entweder links (left), zentriert (center) oder rechts (right)

Vertikale Ausrichtung
Vertikale Ausrichtung (valign) entweder oben (top), zentriert (middle) oder unten (bottom)

Zellen verbinden

Spaltenweise verbinden (= colspan) über so viele Spalten wie angegeben, zeilenweise verbinden (= rowspan) über so viele Zeilen wie angegeben (bei der Definition nachfolgender Zeilen berücksichtigen).