Webdesign-Workshop
von Wolfgang Bergt

Wolfdesign

Tabellen

zur Startseite
zurück Inhaltsübersicht weiter

 

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>

Das sieht dann so aus:

#000000 #00FF00 #0000FF
#FF00FF #777777 #00FFFF
#FF000 #FFFF00 #FFFFFF
gold gold gold


zum Anfang

Beispiele

Schachbrett

zum Anfang

Zusammenfassung

Tabellen-Checkliste
zum Anfang

Quellen

zum Seitenanfang zum Workshop-Anfang zur Inhaltsübersicht