Mit Tabellen lassen sich auf eine sehr leichte Art Daten strukturiert anzeigen.

In der Webentwicklung ist es auch mittlerweile gang und gebe Layouts mit Tabellen umzusetzen. So lassen sich Bilder und Text an gewünschte Stellen positionieren und somit ergeben sich sehr interessante gestalterische Möglichkeiten. Mit CSS und dem Boxmodell erstellte Layouts mögen zwar sinnvoller sein - wer sich jedoch nicht mit CSS auskennt, dem seien die Tabellen-Layouts gestattet.

Wir befassen uns in diesem Kapitel mit der strukturierten Darstellung von Daten in Tabellen.

Eine Tabelle beginnt mit dem <table> Tag und wird mit </table> geschlossen.

Soll die Tabelle ein sichtbares Gitternetz erhalten, dann benutzen sie im <table> Tag die Eigenschaft 'border' und setzen eine Rahmenstärke. Ein Wert von 0 entspicht dabei keine Gitternetzlinien.

Innerhalb der Tabelle definieren sie zuerst die Tabellenzeilen mit <tr></tr> (table row) und innerhalb der Tabellenzeile die Tabellenzellen mit <td></td> (table data). Innerhalb von <td></td> können sie nun Ihre Daten unterbringen.

Ein einfaches Beispiel:

<table border="1">
   <tr>
      <td>Daten 1</td>
      <td>Daten 2</td>
      <td>Daten 3</td>
   </tr>
   <tr>
      <td>Daten 4</td>
      <td>Daten 5</td>
      <td>Daten 6</td>
   </tr>
</table>

So siehts aus

nach oben

Sie können ihrer Tabelle mit <th></th> (table header) auch einen Tabellenkopf geben.

Ein einfaches Beispiel:

<table border="1">
   <tr>
      <th>Spalte 1</th>
      <th>Spalte 2</th>
      <th>Spalte 3</th>
   </tr>
   <tr>
      <td>Daten 1</td>
      <td>Daten 2</td>
      <td>Daten 3</td>
   </tr>
   <tr>
      <td>Daten 4</td>
      <td>Daten 5</td>
      <td>Daten 6</td>
   </tr>
</table>

Der Tabellenkopf wird stärker dargestellt als die Datenzellen.

So siehts aus

nach oben

Es ist möglich die Tabelle in einen Kopf (thead), Fuss (tfoot) und Körperbereich (tbody) aufzuteilen. Hierfür muss im <table> Tag 'rules="groups"' definiert werden. Der Tabellenfuss muss direkt nach dem Tabellenkopf folgen und der Tabellenkörper muss als letztes angegeben sein!!! Tabellenkopf und Tabellenfuss dürfen nur ein einziges mal pro Tabelle vergeben werden. Der Tabellenkörper kann beliebig oft angewendet werden.

Diese Aufteilung ist optional und muss nicht angewendet werden. Fehlen diese Angaben, dann wird der gesamte Inhalt der Tabelle als Tabellenkörper angesehen.

Ein einfaches Beispiel:

<table border="1" rules="groups">
   <thead>
      <tr>
         <th>Spalte 1</th>
         <th>Spalte 2</th>
         <th>Spalte 3</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td>Gesamt 5</td>
         <td>Gesamt 7</td>
         <td>Gesamt 9</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Daten 1</td>
         <td>Daten 2</td>
         <td>Daten 3</td>
      </tr>
      <tr>
         <td>Daten 4</td>
         <td>Daten 5</td>
         <td>Daten 6</td>
      </tr>
   </tbody>
</table> 

So siehts aus

nach oben

Mit <caption></caption> lässt sich für die Tabelle eine Überschrift definieren. Die Tabellenüberschrift muss unmittelbar dem einleitenden table Tag folgen. Die Tabellenüberschrift lässt sich mit 'align' oben (top), rechts (right), unten (bottom) oder links (left) ausrichten. Das 'align' Attribut ist allerdings veraltet und sollte daher nicht mehr verwendet werden. 

Ein einfaches Beispiel:

<table border="1">
   <caption>Quartalszahlen 2/2010</caption>
   <tr>
      <td>Daten 1</td>
      <td>Daten 2</td>
      <td>Daten 3</td>
   </tr>
   <tr>
      <td>Daten 4</td>
      <td>Daten 5</td>
      <td>Daten 6</td>
   </tr>
</table>

So siehts aus

nach oben

Es kann manchmal notwendig sein mehrere Zellen miteinander zu verbinden. Mit colspan können sie eine Zelle über mehrere Spalten überspannen. Mit rowspan lässt sich eine Zelle über mehrere Zeilen überspannen.

Ein einfaches Beispiel mit colspan:

<table border="1">
   <tr>
      <td colspan="3">Quartalszahlen 2/2010</td>
   </tr>
   <tr>
      <td>Daten 1</td>
      <td>Daten 2</td>
      <td>Daten 3</td>
   </tr>
   <tr>
      <td>Daten 4</td>
      <td>Daten 5</td>
      <td>Daten 6</td>
   </tr>
</table>

So siehts aus

Ein einfaches Beispiel mit rowspan:

<table border="1">  
   <tr>
      <td rowspan="3">1</td>
      <td>Daten 1</td>
      <td>Daten 2</td>
   </tr>
   <tr>
      <td>Daten 3</td>
      <td>Daten 4</td>
   </tr>
   <tr>
      <td>Daten 5</td>
      <td>Daten 6</td>
   </tr>
</table>

So siehts aus

Ein einfaches Beispiel mit colspan und rowspan:

<table border="1">
   <tr>
      <td>Daten 1</td>
      <td colspan="2" rowspan="2">Beispiel</td>
   </tr>
   <tr>
      <td>Daten 2</td>
   </tr>
   <tr>
      <td>Daten 3</td>
      <td>Daten 4</td>
      <td>Daten 5</td>
   </tr>
</table>

So siehts aus

nach oben

Tabelle ausrichten:

Sie können Tabellen links, rechts oder zentriert ausrichten mit dem Attribut 'align' im einleitenden <table> Tag.

Tabellenbreite:

Bestimmen sie die Breite ihrer Tabelle mit 'width' und geben sie die Breite in Pixeln an.

Tabellenfarbe:

Färben sie ihre Tabelle mit 'bgcolor' ein. Beispiele zu Farben finden sie im Menüpunkt Farben. Das 'bgcolor' kann auf die gesamte Tabelle, auf die Zeile (tr) und genauso auf die einzelnen Zellen (td)[th] angewandt werden.

Breite einer Spalte definieren:

Bestimmen sie die Spaltenbreite mit 'width' und geben die Breite in Pixeln beim obersten <td> Tag der Spalte an.

Höhe einer Zeile definieren:

Um eine Zeilenhöhe festzulegen geben sie innerhalb des ersten <td> Tag eine 'height' in Pixeln an.

!!! Sie können dem <tr> Tag weder eine Breite noch eine Höhe geben. Diese  Angaben müssen immer im ersten <td> gemacht werden. Die nachfolgenden Zellen richten sich dann automatisch aus.

Horizontale und vertikale Ausrichtung der Zelleninhalte:

Für die Ausrichtung der Inhalte einer Zelle vergeben wir einer <td> ein 'align' für die horizontale Ausrichtung. Mögliche Werte sind hier:

left, right; center

Um eine vertikale Ausrichtung zu erreichen geben wir der Zelle ein 'valign'. Mögliche Werte sind:

top, middle, bottom

Abstand der Zellen zueinander:

Damit die Zellen nicht aneinander kleben können wir mit 'cellspacing' den Abstand zwischen den Zellen festlegen.

Innenabstand von Zellen:

Ebenfalls lässt sich der Abstand des Inhaltes zur Zelle festlegen. Dafür gibt es die Eigenschaft 'cellpadding'.

Ein einfaches Beispiel:

<table border="1" align="center" width="350px" bgcolor="lime" cellspacing="20px" cellpadding="10px">
   <tr>
      <td height="60px" valign="top">Daten 1</td>
      <td valign="middle">Daten 2</td>
      <td width="150px" valign="bottom" align="center">Daten 3</td>
   </tr>
   <tr bgcolor="pink">
      <td>Daten 4</td>
      <td>Daten 5</td>
      <td bgcolor="white">Daten 6</td>
   </tr>
</table>

So siehts aus

nach oben

Wenn es jetzt noch nicht zu kompliziert ist, dann versuchen wir einmal zwei Tabellen ineinander zu verschachteln.

Ein einfaches Beispiel:

<table border="1" align="center" width="350px" bgcolor="lime">
    <tr>
        <td colspan="3">
            <table border="1" bgcolor="orange" width="100%">
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                    <td>E</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>Daten 1</td>
        <td>Daten 2</td>
        <td>Daten 3</td>
    </tr>
    <tr>
        <td>Daten 4</td>
        <td>Daten 5</td>
        <td>Daten 6</td>
    </tr>
</table>

So siehts aus

nach oben

Linktipps: