Tabellen

1. Allgemeines

Tabellen stellen ein häufig benutzes Gestaltungswerkzeug bei der HTML-Programmierung dar. Sie werden nicht nur zur Darstellung von Daten in einer tabellarischen Form eingesetzt, sondern viel häufiger als Seitengestaltungselement. Dabei sind die Tabellenzellen auf dem Bildschirm durch entsprechende Formatierung nicht sichtbar.

1. Zeilen und Spalten

Eine Tabelle besteht aus Zeilen und Spalten. In HTML wird zunächst durch den Container TABLE eine Tabelle initiiert. Sie besitzt aber noch keine Zeilen oder Spalten. Die Tabellenzeilen werden durch den im TABLE-Container eingeschlossenen Container TR erzeugt. Die Spalten wiederum durch den oder die im TR-Container enthaltenen Container TD, welche(r) eine oder mehrere Tabellenzellen innerhalb einer Zeile erzeugen. Als Beispiel eine Tabelle mit 2 Zeilen und Spalten:

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

Bei vorgebener Breite 1 des Rahmens ergibt sich:

Tabellenzellen werden von den Browsern nur dargestellt, wenn sie einen Inhalt haben. HTML- ober Webeditoren schreiben deshalb häufig ein Leerzeichen &nbsp; in eine Tabellenzelle. Dies kann bei einigen Tabellenzellenanweisungen zu Schwierigkeiten führen.

Neben den einfachen Tabellenzellen gibt es auch die Möglichkeit, Tabellenköpfe mittels des TH-Containers anstelle des TD-Containers zu erstellen:

<table>
  <tr>
    <th>
    </th>
    <th>
    </th>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
  </tr>
</table>

Die Rahmenbreite ist ein Parameter des TABLE-Containers, mit der Bezeichnung BORDER:
<table border="Zahl">

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

Ansicht (zur besseren Sichtbarkeit ist der Rahmen gelb eingefärbt):

Ein weiterer Parameter des TABLE-Containers ist die Tabellenbreite WIDTH. Sie kann in Prozent der jeweiligen Bildschirmbreite bzw. bei Frames in Prozent der jeweiligen Framebreite (z.B. "75%") oder als absoluter Wert in Pixeln angegeben werden (z.B. "500").

 
<table width="75%" border="1">
  <tr>
    <td>
    </td>
    <td>
    </td>
  </tr>
 </table> 

Ansicht:

Ein weiterer Parameter für den TABLE-Tag ist die Hintergrundfarbe für die gesamte Tabelle BGCOLOR.
Außerdem kann mit dem Container CAPTION der Tabelle eine Überschrift zugeordnet werden, die ohne weiteren Parameter zentriert plaziert wird. Für eine Benennung unterhalb der Tabelle muß der Parameter ALIGN mit dem Wert "bottom" hinzugefügt werden. Er steht nicht im TABLE-Starttag, sondern folgt direkt danach.

 
<table width="75%" border="1" bgcolor="#F000CC">
  <caption> Tabellenüberschrift </caption>
  <tr>
    <td>
    </td>
    <td>
    </td>
  </tr>
 </table> 

Auch einer einzelnen Zelle kann mittels des Parameters BGCOLOR eine Hintergrundfarbe zugewiesen werden.

<table width="75%" border="1" bgcolor="#F000CC">
  <tr>
    <td bgcolor="#ffff00">
    </td>
    <td>
    </td>
  </tr>
 </table>

Mittels der Parameter COLSPAN und ROWSPAN können Zellen innerhalb von Spalten oder Reihen zusammengefaßt werden.
Die Zellen innerhalb einer Reihe werden mit dem Parameter COLSPAN im TD-Container zusammengefaßt:

<table width="75%" border="1" bgcolor="#ff00cc">
  <tr>
    <td bgcolor="#0000ff" colspan=2>
    </td>
  </tr>
  <tr>
    <td bgcolor="#ffff00">
    </td>
    <td>
    </td>
  </tr>
 </table>

Ergebnis:

Die Zellen einer Spalte werden mit ROWSPAN im TD-Container zusammengefaßt:

<table width="75%" border="1" bgcolor="#ff00cc">
  <tr>
    <td bgcolor="#0000ff" rowspan=2>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td bgcolor="#ffff00">
    </td>
  </tr>
 </table>

Ergebnis:

Neben den bereits erwähnten Parametern gibt es noch andere Parameter. Sie regeln zum Beispiel den Abstand vom Zellinhalt zum Zellenrand (CELLPADING) und die Dicke des Gitterrahmens der Tabelle (CELLSPACING). Beide Parameter können den Wert "0" annehmen (kein Textabstand zum Gitter bzw. unsichtbarer Gitterrahmen). Die Einheit des Zahlenwertes sind Pixel.

<table width="50%" border="1" cellspacing="Wert" cellpadding="Wert">
   <tr>
    <td>
    </td>
    <td>
    </td>
  </tr>
</table>

Folgenden Effekt hat cellspacing (Wert 5):

Folgenden Effekt hat cellpadding (Wert 5):

Die folgende Tabelle verdeutlicht die Unterschiede zwischen BORDER und CELLSPACING. BORDER verändert den Rand der gesamten Tabelle, CELLSPACING den Rand der einzelnen Zellen.

Border="5" Cellspacing="0"

Border="1" Cellspacing="5"

Eine Tabelle kann zur Plazierung von Elementen verwendet werden. Falls Bilder zu groß sind, können sie mit einem geeigneten Programm in Einzelteile zerlegt werden und mittels einer Tabelle nahtlos wieder zusammengesetzt werden. Die Zerlegung des Bildes hat den Vorteil, das der Ladevorgang schneller erfolgt. Um eine Darstellung ohne störende Zwischenräume zu erreichen, müssen alle Parameter (border, cellspacing, cellpadding), die eine Trennung(slinie) erzeugen könnten, auf 0 gesetzt werden. Einige dieser Parameter werden von den Browsern, sofern sie nicht auf 0 gesetzt werden, mit einem voreingestellten Wert angezeigt. Links das fertige Ergebnis, rechts mit einem Rand von 1 Pixel um zu zeigen, wie die Tabelle aussieht.

Tabellen lassen sich auch ineinander schachteln:

Tabelleninhalte lassen sich mit ALIGN oder VALIGN als Parameter im TD-Container (Tabellenzelle) ausrichten:
Parameter sind:
align = right, left, center
valign = top, bottom, middle, baseline

 
<table width="50%" border="1" cellspacing="Wert" cellpadding="Wert">
  <tr> 
    <td align="right" valign="top"> 
      </td> 
      <td align="left" valign="bottom"> 
		</td> 
  </tr> 
</table>

Ansicht mit Grafiken als Objekt:

Impressum

© Nature-Flash 2002