html Tabellen

Tabellen sind ein wichtiges Gestaltungsmittel der Seite, weil hiermit die Platzierung der Texte, Bilder und anderer Elemente gesteuert werden kann.

Die folgende Tabelle ist zu sehen, weil sie mit folgendem Befehl eingeleitet wurde:

<table align="center"	Tabelle ist auf der Seite zentriert
background="background.gif"	der Hintergrund ist das Bild background.gif
border="13"	der Rahmen ist 13 Pixel breit
cellpadding="20"	die Zellen sind 20 Pixel hoch
cellspacing="8"	zwischen den Zellen ist 8 Pixel platz
bordercolorlight="#0066CC"	der helle Teil des Rahmens ist hellblau
bordercolordark="#000099"	der dunkle ist dunkelblau
width="100%">	die Breite ist 100% der sichtbaren Seite

<tr> steht für den Beginn der Zeile
<td width="20%"> die Breite der ersten Zelle, und damit der Spalte beträgt 20%

Beachten Sie die Befehle zum Zusammenfügen von Zellen durch rowspan und colspan. Dabei sollten Sie im weiteren Verlauf darauf Acht geben, wo sich die Anzahl der Zellen verringert. Die Ausrichtung der Elemente in der Zelle erfolgt mit den Befehlen: <td valign="top"> oder "middle" bzw. "bottom"

Text der ersten Zelle	Zelle 2 valign="top"	Zelle 3 valign="bottom"
Zelle 4 rowspan="3" darum bei den nächsten beiden <tr> nur 2 mal <td> align="center" (zentriert)	Zelle 5 colspan="2", darum hier nur 2 mal <td> innerhalb dieses <tr> Zelle 4 und 5 align="right" (rechtsbündig)
	Zelle 6	Text oder Bild Zelle 7
	colspan="2", also ein <td> fällt weg das zweite <td> fällt weg weil in Zelle 4 rowspan="3"
Zelle 9 colspan="3", darum nur 1 mal <td> (rowspan="3" aus Zelle 4 reicht nur bis zur 4. Zeile)

Diese Tabelle hat folgende Befehlsstruktur:

Wenn die Tabelle nicht anders definiert ist, passt sich die Breite der Spalten automatisch an die Größe der eingebetteten Elemente an. So wird zum Beispiel die Breite der ersten Spalte allein durch die Länge des Textes in Zelle 4 und 5 bestimmt. Wäre ein längerer Text in einer mitleren oder rechten Zelle ohne manuellen Zeilenumbruch länger, würden sich die linke Spalte verkleinern und gegebenenfalls einen Zeilenumbruch erzwingen. Wäre der Text in Zelle 4 noch schmaler, so würde sich die Aufteilung der Spalten ebenfalls ändern. Aus diesem Grunde sollte man bei der Erarbeitung von Zeit zu Zeit seine Arbeit speichern und das Ergebnis in einem Browser kontrollieren.

<td wi...	<td width="40%">	<td width="40%">
x	Zelle	<td bgcolor="#000099">