Tabellen

Tabellen sind in HTML ein wichtiges Hilfsmittel.

Man kann mit ihnen Daten tabellarisch anzeigen, z.B. eine Wertetabelle:

<table border=1>
<tr> <td>x</td> <td>2</td> <td>-5</td> </tr>
<tr> <td>y</td> <td>-3</td> <td>7</td> </tr>
</table>
x 2 -5
y -3 7

Mit dem links stehenden HTML-Befehlen wurde die kleine Tabelle rechts erzeugt. Man erkennt, dass zur Definition einer Tabelle drei Tag-Paare wichtig sind:
Wie meistens in HTML kann man die Tags erweitern, z.B. wie oben mit border=1. Ohne diese Erweiterung sieht man keine Begrenzungen. Ausprobieren ! Über diverse Tag-Erweiterungen läßt sich das Aussehen einer Tabelle steuern. Fehlen diese Erweiterungen, so werden viele Einstellungen automatisch vorgenommen. Es wird etwa die Zellengröße angepaßt und der Inhalt zentriert angeordnet.

Aufgabe: Schreibe ein kleines HTML-Dokument, das eine Tabelle mit 2 Spalten und 3 Zeilen enthält. Informiere dich in Selfhtml über weitere Möglichkeiten.


Man kann mit Tabellen Grafiken und Text anordnen und Teile des Bildschirms einfärben. Es ist auch möglich eine Tabelle in einer Zelle zu definieren, Tabellen lassen sich verschachteln. Obige Aufgabenstellung ist ein weiteres kleines Beispiel. Damit in der linken oberen Zelle etwas drin ist, wurde eine 1-Pixel-Grafik (../p1.gif) mit transparentem Hintergrund eingefügt.

Zellenhöhen und Spaltenbreiten

Das folgende Beispiel zeigt die Verwendung der tag-Erweiterungen height und width. 
<table border=1>
<tr> <td height=60>x</td> <td width=200>1</td> <td>2</td> <td>3</td> </tr> 
<tr> <td>y</td> <td>4</td> <td>5</td> <td>6</td> </tr>
</table>

x 1 2 3
y 4 5 6


Zellen verbinden

Das folgende Beispiel zeigt die Verwendung der tag-Erweiterungen colspan und rowspan. 
<table border=1>
<tr> <td rowspan=2>über 2 Zeilen</td> <td>a</td> <td>b</td> <td>c</td> </tr> 
<tr> <td>d</td> <td colspan=2>über 2 Spalten</td>  </tr>
</table>

über 2 Zeilen a b c
d über 2 Spalten

Ausrichtung innerhalb einer Zelle

Das folgende Beispiel zeigt die Verwendung der tag-Erweiterungen align und valign. 
<table border=1>
<tr> <td height=60>x</td> <td width=200 valign=bottom align=center>1</td> 
<td valign=top>2000</td> <td>3</td> </tr> 
<tr> <td>y</td> <td align=right>4</td> <td>5</td> <td>6</td> </tr>
</table>

x 1 2000 3
y 4 5 6

Farben und Abstand des Zellinhalts vom Rand

Das folgende Beispiel zeigt die Verwendung der tag-Erweiterungen bgcolor und cellpadding . 
<table border=1 cellpadding=30>
<tr> <td height=60 bgcolor=red>x</td> <td width=200 valign=bottom align=center bgcolor=#dddd00>1</td> 
<td valign=top>2000</td> <td>3</td> </tr> 
<tr> <td>y</td> <td align=right>4</td> <td bgcolor=green>5</td> <td>6</td> </tr>
</table>

x 1 2000 3
y 4 5 6