Webdesign-Workshop
von Wolfgang Bergt

Wolfdesign

Tabellen

Inhalt

Tabellenstruktur
Syntax
Zellengestaltung
Tabellen-Layout
Tabellenfüllung
Beispiele
Zusammenfassung
Quellen

Tabellenstruktur

Tabellen sind eine sehr leistungsfähige Möglichkeit, die Gestaltung des Bildschirms zu organisieren. Allerdings sollte man bei sehr großen Tabellen beachten, dass der Browser erst mit der Anzeige beginnt, wenn alles eingelesen ist. Deshalb sollte man Tabellen mit viel Inhalt teilen.

Jede Tabelle beginnt mit dem Tag <table> und endet mit </table>.

Jede Tabellenzeile wird mit <tr> begonen und endet mit </tr>.

Die einzelnen Tabellenzellen stehen zwischen <td> und </td>.

So hat die einfachste Tabelle folgende Struktur:

<table>
	
 <tr>
	
  <td>Zelle</td>
	
 </tr>
	
</table>

zum Anfang

Syntax

Die Syntax ist bei Tabellen sehr wichtig. Netscape-Browser z. B. sind kaum fehlertolerant und zeigen gar nichts an, wenn nur ein einziger Syntax-Fehler gemacht wurde.

Um zwischenzeitlich die Tabelle immer wieder einmal zu testen, empfiehlt es sich, der Tabelle mit dem Attribut border="1" einen Rand zu geben. Am Ende kann man dann die Ränder durch border="0" wieder unsichtbar machen.

Eine Tabelle mit 4 Spalten und 3 Zeilen wid folgendermaßen definiert:

<table border="1">
	
 <tr>
	
  <td>A1</td>
	
  <td>B1</td>
	
  <td>C1</td>
	
  <td>D1</td>
	
 </tr>
	
 <tr>
	
  <td>A2</td>
	
  <td>B2</td>
	
  <td>C2</td>
	
  <td>D2</td>
	
 </tr>
	
 <tr>
	
  <td>A3</td>
	
  <td>B3</td>
	
  <td>C3</td>
	
  <td>D3</td>
	
 </tr>
	
</table>

Und so sieht sie aus:

A1	B1	C1	D1
A2	B2	C2	D2
A3	B3	C3	D3

zum Anfang

Zellengestaltung

Defaultmäßig ist der Zelleninhalt linksbündig und vertikal zentriert ausgerichtet, und die Spaltenbreite richtet sich nach dem breitesten Zelleninhalt der Spalte.

A1	B1	langer Text	D1
A2	B2	C2	D2
langer Text	B3 B3 B3	C3	D3

Zellenbreite, Zellenhöhe und Ausrichtung lassen sich durch Attribute festlegen:

width="25%" oder width="100" (Pixel)
height="80"
align="left", align="center" oder align="right"
valign="top", valign="middle" oder valign="bottom"

A1 height="100" width="150" valign="top"	B1	langer Text	D1
A2 align="center"	B2	C2	D2
A3 height="150" align="right" valign="bottom"	B3 B3 B3	C3	D3

zum Anfang

Tabellen-Layout

Tabellen eignen sich hervorragend dazu, den auf dem Bildschirm zur Verfügung stehenden Platz effektiv zu nutzen und klug zu gestalten.
Mit dem Attribut width="100%" im <table>-Tag wird die Tabelle so breit wie sichtbar möglich.

Sinngemäß kann mit dem Attribut height="100%" im <table>-Tag eine Anzahl von Elementen gleichmäßig in der Bildschirmhöhe angeordnet werden.

Überhaupt ist eine konsequente Verwendung der Attribute sehr zu empfehlen und so wenig wie möglich dem Zufall bzw. dem fremden Browser zu überlassen.

Die Hohe Schule der Tabellengestaltung ist die Verbindung benachbarter Zellen. Auch das erreicht man mit Attributen:

rowspan="3" verbindet drei Zeilen.
colspan="3" verbindet drei Spalten.

rowspan="3" height="200" width="150" valign="top"	B1	langer Text	D1
	colspan="3"
	B3 B3 B3	C3	D3

zum Anfang

Tabellenfüllung

In Tabellen, Zeilen oder Zellen lassen sich Grafiken einfügen. Aber das einfache Füllen mit einer Farbe durch das Attribut bgcolor="Farbe" erzeugt sehr einfach wirkungsvolle Effekte:

<table border="1">
	
 <tr>
	
  <td bgcolor="#000000">#000000</td>
	
  <td bgcolor="#00FF00">#00FF00</td>
	
  <td bgcolor="#0000FF">#0000FF</td>
	
 </tr>
	
 <tr>
	
  <td bgcolor="#FF00FF">#FF00FF</td>
	
  <td bgcolor="#777777">#777777</td>
	
  <td bgcolor="#00FFFF">#00FFFF</td>
	
 </tr>
	
 <tr>
	
  <td bgcolor="#FF0000">#FF000</td>
	
  <td bgcolor="#FFFF00">#FFFF00</td>
	
  <td bgcolor="#FFFFFF">>#FFFFFF</td>
	
 </tr>
	
 <tr bgcolor="gold">
	
  <td>gold</td>
	
  <td>gold</td>
	
  <td>gold</td>
	
 </tr>
	
</table>