Startseite
Tabellen in HTML  

Feedback     Interesse an einer CD ?    


Aufbau einer Tabelle

<table border="Wert">
<tr>
<td></td>
</tr>
</table>

Der Tag <table> leitet eine Tabellendefinition ein.
Mit dem Attribut border legen Sie die Umrandung der Tabelle in Pixeln fest. Geben Sie das Attribut nicht an, wird kein Rahmen verwendet. Der Wert 0 erstellt eine Tabelle ohne Rand. Eine größere Angabe bewirkt, dass ein dreidimensionaler Rand um die Tabelle gelegt wird.

Der Tag <tr> definiert eine Zeile (tr - table row - Tabellenzeile).
Über den Tag <td> legen Sie die Zellen fest, die in der definierten Zeile dargestellt werden sollen (td - table data - Daten der Tabelle). Erst die Angabe dieses Tags bewirkt den Aufbau einer Tabelle.

Mit den Tags </td>, </tr> und </table> beenden Sie eine Zelle, eine Zeile und die Tabelle.

Beispiel:

<table border="5">
<tr>
<td>Dies ist die kleinstmögliche Tabelle</td>
</tr>
</table>

Dies ist die kleinstmögliche Tabelle

Tabellenzellen können auch leer sein. Wenn Sie in einer Zelle keine Daten eingeben möchten, so fügen Sie dort das Leerzeichen &nbsp; ein.

Beispiel:

<table border="1">
<tr>
<td>&nbsp;</td>
<td>Daten</td>
</tr>
<tr>
<td>Name</td>
<td>Meiermüllermann</td>
</tr>
</table>

  Daten
Name Meiermüllermann

Tabellenzellen automatisch formatieren

<th></th> Der Tag <th> definiert den Inhalt der Zellen als Spaltenüberschriften (th - table Header - Tabellenkopf). Wenn Sie diesen Tag anstelle der <td>-Tags verwenden, wird der Text in diesen Zellen fett hevorgehoben und zentriert dargestellt.

Beispiel:

<table border="1">
<tr>
<td>&nbsp;</td>
<th>Daten</th>
</tr>
<tr>
<td>Name</td>
<td>Meiermüllermann</td>
</tr>
</table>

  Daten
Name Meiermüllermann


Breitenangaben

Breite einer Tabelle

<table width="Wert">

Die Angabe width (Breite) innerhalb des <table>-Tags legt die Breite der Tabelle fest, ohne den Inhalt der Tabelle zu beachten.

Prozentangaben sind abhängig von der Fensterbreite, wobei 100 % der gesamten Breite des Browserfensters entspricht. Pixelangaben sind feste Werte.

Beispiel:

<table border="1" width="50%">

<tr>
<th>Tabelle mit Breitenangabe</th>
</tr>

<tr>
<td>Diese Tabelle hat eine Breitenangabe von 50 %</td>
</tr>

<tr>
<td>Das bedeutet, sie hat immer eine Breite von 50% des Fensters,
unabhängig, wie viel Text sich in der Tabelle befindet.</td> </tr> </table>
Tabelle mit Breitenangabe
Diese Tabelle hat eine Breitenangabe von 50 %
Das bedeutet, sie hat immer eine Breite von 50% des Fensters, unabhängig, wie viel Text sich in der Tabelle befindet.

Spaltenbreite

So wie Sie die Breite der gesamten Tabelle angeben können, können Sie auch gezielt die Breite jeder einzelnen Zelle beeinflussen. Danach besitzen alle Zellen einer Spalte diese Breite.

<td width="Wert">

Die Angabe width innerhalb des Tags <td> und <td> setzt die Breite einer einzelnen Spalte, ohne den Inhalt der Zelle zu beachten.

Prozentangaben sind abhängig von der Tabellenbreite, Pixelangaben sind dagegen feste Werte. Das Zeichen * ist ein Spezialfall und bedeutet: Rest, der übrig bleibt.

Innerhalb einer Tabelle müssen Sie die Breite einer Spalte jeweils nur in der ersten Zeile angeben. Die Zellen der restlichen Zeilen erhalten dieselbe Breite wie die erste Zelle der jeweiligen Spalte. Sie können die Spaltenbreite jedoch in einer beliebigen anderen Zelle setzen. Verwenden Sie mehrere Britenangaben für dieselbe Spalte, wird die breitere Angabe verwendet.

Bei einer prozentualen Angabe der Breite muss die Summe aller Spaltenbreiten exakt 100% ergeben. Das selbe gilt für die Angabe in Pixeln, wenn Sie im Tag <table> eine Tabellenbreite angegeben haben.

Beispiel:
<table align="center" border="1" width="75%">

<tr>
<td width="20%">20%</td>
<td width="30%">30%</td>
<td width="50%">50%</td>
</tr>

</table>
20% 30% 50%

Eine Tabelle mit einer Breite von 75% des Browserfensters wird erstellt. Die drei Zellen haben eine Breite von 20%, 30% und 50% bezüglich der Tabellenbreite. Die Addition der Angaben ergibt für die Tabellenbreite wieder 100%

Beispiel:
<table align="center" border="1" width="75%">

<tr>
<td width="20%">20%</td>
<td width="*">* Rest</td>
<td width="50%">50%</td>
</tr>

</table>
20% * Rest 50%

Eine Tabelle mit einer Breite von 75% des Browserfensters wird erstellt. Zwei Zellen haben eine Breite von 20% und 50%. Die mittlere Zelle wird in der verbleibenden Größe angezeigt (dem Rest - *). Dies wären in diesem Fall: 100% - 20% - 50% = 30%.

Beispiel:
<table align="center" border="1" width="500">

<tr>
<td width="150">150 Pixel</td>
<td width="250">250 Pixel</td>
<td width="100">100 Pixel</td>
</tr>

</table>
150 Pixel 250 Pixel 100 Pixel

Eine Tabelle mit einer Breite von 500 Pixeln wird erstellt. Die drei Zellen haben eine Breite von 150, 250 und 100 Pixeln. Die Addition der Angaben ergibt die definierten 500 Pixel der Tabellenbreite.

Breite erzwingen

Die Breite einer Spalte ist nur wirksam, wenn der Inhalt einer Zelle die Breitenangabe nicht überschreitet. Wenn der Inhalt größer ist und nicht umgebrochen werden kann, wird die Breitenangabe außer Kraft gesetzt. Die Spalte wird in diesem Fall so breit erzeugt, dass das breiteste Element der Spalte angezeigt werden kann. Das ist beispielsweise der Fall, wenn in der Spalte eine Grafik angezeigt wird, die breiter als die angegebene Spaltenbreite ist.

Beispiel:
<table align="center" border="1" width="75%">

<tr>
<td width="20%">20%</td>
<td width="30%">30%</td>
<td width="50%">50%</td>
</tr>

<tr>
<td width="20%"><img src="img/th_land.jpg"width="187" height="120" border="0"alt="th_land"></td>
<td width="30%">30%</td>
<td width="50%">50%</td>
</tr>

</table>
20% 30% 50%
th_land 30% 50%

Zeilenumbruch verhindern

<td nowrap="true"> Das Attribut nowrap kann in den Tags <td> und <th> verwendet werden. Verwenden Sie allerdings zusätzlich die Breitenangabe in diesen Tags, hat diese Vorrang.


Tabellenüberschrift

<caption>
</caption>
Über den Tag <caption> (Überschrift) erstellen Sie eine Tabellenüberschrift. Dieser Tag muss direkt nach dem Tag <table> angegeben werden.
Zusätzlich sind mit dem Attribut align Angaben zur Ausrichtung der Überschrift möglich.

Beispiel:
<table align="center" border="1" width="50%">
<caption align="left"><b>Speiseplan</b></caption>

<tr>
<td>Salat</td>
<td>Sauerbraten</td>
</tr>

<tr>
<td>Suppe</td>
<td>Nudelauflauf</td>
</tr>

</table>
Speiseplan
Salat Sauerbraten
Suppe Nudelauflauf

Beispiel:
<table align="center" border="1" width="50%">
<caption align="right"><b>Speiseplan</b></caption>

<tr>
<td>Salat</td>
<td>Sauerbraten</td>
</tr>

<tr>
<td>Suppe</td>
<td>Nudelauflauf</td>
</tr>

</table>
Speiseplan
Salat Sauerbraten
Suppe Nudelauflauf

Beispiel:
<table align="center" border="1" width="50%">
<caption align="top"><b>Speiseplan</b></caption>

<tr>
<td>Salat</td>
<td>Sauerbraten</td>
</tr>

<tr>
<td>Suppe</td>
<td>Nudelauflauf</td>
</tr>

</table>
Speiseplan
Salat Sauerbraten
Suppe Nudelauflauf

Beispiel:
<table align="center" border="1" width="50%">
<caption align="bottom"><b>Speiseplan</b></caption>

<tr>
<td>Salat</td>
<td>Sauerbraten</td>
</tr>

<tr>
<td>Suppe</td>
<td>Nudelauflauf</td>
</tr>

</table>
Speiseplan
Salat Sauerbraten
Suppe Nudelauflauf

Standardmäßig werden die Tabellenüberschriften in Form eines Fließtextes dargestellt. Um diese jedoch auffälliger zu formatieren, können Sie auch die Tags zur Textgestaltung anwenden. Außerdem können Bilder und Hyperlinks in der Tabellenüberschrift verwendet werden.


Kopf-, Rumpf- und Fußbereich

<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
Mit diesen Tags organisieren Sie eine Tabelle in drei verschiedenen Gruppen:

<thead> Kopfteil der Tabelle; speziell für Überschriften gedacht.
<tfoot> Fußteil der Tabelle; für Erläuterungen zu den Angaben innerhalb der Tabelle.
<tbody> Rumpf der Tabelle; enthält die eigentlichen Daten.

Beispiel:
<table cellpadding="6" width="80%" border="1" align="center">

<thead align="center">
<tr>
<td colspan="2">zentrierter Tabellenkopf</td>
</tr>
</thead>

<tfoot align="right">
<tr>
<td colspan="2"><font size="-2">Rechtsbündiger Tabellenfuß</font></td>
</tr>
</tfoot>

<tbody>
<tr>
<td align="center">xxxxxx</td>
<td>Linksbündiger Tabellenkörper</td>
</tr>
</tbody>

</table>
Zentrierter Tabellenkopf
Rechtsbündiger Tabellenfuß
xxxxxx linkssbündiger Tabellenkörper

Der Vorteil der Gruppierung von Elementen ist, dass Sie die einzeln angelegten Gruppen unterschiedlich ausrichten können. So können Sie beispielsweise die Inhalte im Tabellenkopf zentrieren, währenddessen die Inhalte im Tabellenkörper rechtsbündig ausgerichtet sein können.