<table>
 ... Tabelleninhalt ...
</table>

Des Weiteren besteht eine Tabelle jeweils aus Zellen, Zeilen und Spalten. Damit bei diesen Begriffen auch klar ist, was dabei gemeint ist, soll die folgende Grafik dies verdeutlichen:

Das Tabellengerüst in seinen Einzelteilen
Darstellung: Das Tabellengerüst in seinen Einzelteilen

Zellen - Eine Zelle ist die kleinste Einheit einer Tabelle, sie ist das Feld in dem sich die Daten (Text, Bilder etc.) befinden.

Zeilen - Eine Zeile besteht aus allen Zellen, die sich nebeneinander befinden und auf der gleichen Höhe liegen.

Spalten - Eine Spalte sind alle Zellen, die sich untereinander befinden und auf gleicher Breite liegen.

Zeilen  nach oben

In HTML-Tabellen werden Zeilen definiert. Diese Zeilen sollten nun wiederum Zellen enthalten. Um eine Zeile zu notieren verwendet man das tr-Element. Es wird innerhalb des Tabellengerüsts (table-Element) notiert. Beispiel:

<table>
 <tr>... Zeileninhalt ... </tr>
 <tr>... Zeileninhalt ... </tr>
</table>

Zellen  nach oben

Wie schon gesagt, werden in diese Zeilen nun Zellen definiert. Dazu verwendet man das td-Element. In eine Zeile können beliebig viele Zellen definiert werden. Beispiel:

<table>
 <tr>
  <td>... Zelleninhalt der 1.Zeile erste Zelle ... </td>
  <td>... Zelleninhalt der 1.Zeile zweite Zelle ... </td>
 </tr>
 <tr>
  <td>... Zelleninhalt der 2.Zeile erste Zelle ... </td>
  <td>... Zelleninhalt der 2.Zeile zweite Zelle ... </td>
 </tr>
</table>

Eine besondere Zellenart stellt das th-Element dar. Es beschreibt eine Tabellenkopfzelle (Sozusagen also die Überschriften der Spalten). Beispiel:

<table>
 <tr>
  <th>... Kopfzelleninhalt der 1.Zeile erste Zelle ... </th>
  <th>... Kopfzelleninhalt der 1.Zeile zweite Zelle ... </th>
 </tr>
 <tr>
  <td>... Zelleninhalt der 2.Zeile erste Zelle ... </td>
  <td>... Zelleninhalt der 2.Zeile zweite Zelle ... </td>
 </tr>
</table> 

Spaltengruppen  nach oben

Um mehrere untereinanderstehende Zellen (also eine Spalte) mit gleichen Attributen definieren zu können, kann man das colgroup-Element verwenden. In es hinein werden ein oder mehrere col-Elemente notiert. Dabei verhalten sich dann alle tr-Elemente wie das notierte colgroup-Element und alle td- bzw. th-Elemente wie das zugehörige col-Element. Beispiel:

<table>
 <colgroup>
 <col width="100">
 <col height="45">
 </colgroup>
 <tr>
 <th>... Breite von 100 Pixel ...</th>
 <th>... Höhe von 45 Pixel ... </th>
 </tr>
 <tr>
 <td>... Breite von 100 Pixel ... </td>
 <td>... Höhe von 45 Pixel ... </td>
 </tr>
</table> 

Bitte beachten Sie, dass die Elemente col und colgroup nur der (optischen) Formatierung dienen, sie ersetztn keine Zellen, Zeilen oder Spalten.

Tabellenkopf, -körper und -fuß  nach oben

Tabellenabschnitte definiert man, um eine bessere Übersicht zu gewährleisten. Der Tabellenkopf stellt dabei die Werte der Tabelle dar. Er wird mit dem thead-Element beschrieben. Der Tabellenkörper stellt dabei die Inhalte der Tabelle dar. Er wird mit dem tbody-Element beschrieben. Letztlich besteht noch der Tabellenfuß, welcher die Tabellenergebnisse darstellt. Er wird mit dem tfoot-Element beschrieben. Die Elemente umschließen jeweils ein bzw. mehrere Zeilen. Beispiel:

<table>
 <thead>
 <tr>
 <th>... Kopfzelleninhalt der 1.Zeile erste Zelle ... </th>
 <th>... Kopfzelleninhalt der 1.Zeile zweite Zelle ... </th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <td>... Zelleninhalt der Fußzeile erste Zelle ... </td>
 <td>... Zelleninhalt der Fußzeile zweite Zelle ... </td>
 </tr>
 </tfoot>
 <tbody>
 <tr>
 <td>... Zelleninhalt der 2.Zeile erste Zelle ... </td>
 <td>... Zelleninhalt der 2.Zeile zweite Zelle ... </td>
 </tr>
 <tr>
 <td>... Zelleninhalt der 3.Zeile erste Zelle ... </td>
 <td>... Zelleninhalt der 3.Zeile zweite Zelle ... </td>
 </tr>
 </tbody>
</table> 

Es ist vorgesehen bzw. gedacht, dass durch Tabellenkopf, -körper und -fuß die Übersicht verbessert werden soll. Dies soll so geschehen, dass bei längeren Tabellen der Tabellenkopf und/oder Tabellenfuß stehen bleibt und man den Tabellenkörper scrollen kann. So hat man den Vorteil immer die Tabellenwerte bzw. Tabellenergebnisse sehen zu können. Leider wird dies noch von keinem Browser unterstützt.
Bitte beachten Sie: Wie im Beispiel zu sehen, muss tfoot vor tbody notiert werden. Dies hat seinen Grund darin, dass so der Browser schonmal die Tabellenzusammenfassung rendern kann, bevor er die vielleicht unzaehligen Datenzeilen dazwischen lädt.

Mehrspaltige Zellen  nach oben

Um Zellen über mehrere Spalten legen zu können benutzt man das colspan-Attribut. Als Wert wird hier die Anzahl der Zellen eingetragen die die Zelle ausfüllen soll (siehe auch nächster Absatz). Beispiel:

<table>
 <tr>
  <td>... Zelleninhalt ... </th>
  <td>... Zelleninhalt ... </th>
  <td colspan="2">... Zelleninhalt ... </th>
  <!-- eigentliche Zelle -->
 </tr>
 <tr>
 <td colspan="3">... Zelleninhalt ... </td>
  <!-- eigentliche Zelle -->
  <!-- eigentliche Zelle -->
  <td>... Zelleninhalt ... </td>
 </tr>
</table> 

Mehrzeilige Zellen  nach oben

Um Zellen über mehrere Zeilen legen zu können benutzt man das rowspan-Attribut. Als Wert wird hier die Anzahl der Zeilen eingetragen die die Zelle ausfüllen soll. Beispiel:

<table>
 <tr>
  <td>... Zelleninhalt ... </td>
  <td rowspan="2">... Zelleninhalt ... </th>
 </tr>
 <tr>
  <td>... Zelleninhalt ... </th>
  <!-- eigentliche Zelle -->
 </tr>
</table> 

Zur Verdeutlichung der beiden Attribute zur Zellverläufe soll nochmals die folgende Grafik dienen:

Zellverläufe mit colspan und rowspan
Darstellung: Zellverläufe mit colspan und rowspan

Breite und Höhe  nach oben

Mit dem width-Attribut kann die Tabellenbreite, Zellenbreite und Zeilenbreite festgelegt werden. Mit dem height-Attribut kann die Tabellenhöhe, Zellenhöhe und Zeilenhöhe notiert werden. Dies beides jeweils dem endsprechenden Element zugeordnet. Als Werte können hierbei Pixelangaben wie auch Prozentangaben verwendet werden. Beispiel:

<table height="50%">
 <tr height="20">
  <td>... Zelleninhalt ... </td>
  <td>... Zelleninhalt ... </td>
 </tr>
</table>

<table height="200">
 <tr width="100">
  <td width="30">... Zelleninhalt ... </td>
  <td width="70">... Zelleninhalt ... </td>
 </tr>
</table>

Bei Prozentangaben richten sich die Angaben der Zellen- bzw. Zeilenhöhe nach der Tabellenhöhe. Ebenso ist es bei der Breite. Jeweils wird eine eventuelle Differenz durch die Vergrößerung bzw. Verkleinerung anderer Zellen und/oder Zeilen ausgeglichen.

Zellenabstand  nach oben

Den Zellenabstand (der Abstand der Zellen zueinander) notiert man mit dem cellspacing-Attribut des table-Elements. Beispiel:

<table border="2" cellspacing="4">
 ... Tabelleninhalt ...
</table>

<table border="5" cellspacing="0">
 ... Tabelleninhalt ...
</table> 

Beachten Sie bitte, dass durch einen größeren Zellenabstand automatisch die innere Rahmenbreite vergrößert wird.

Innerer Zellenabstand  nach oben

Den inneren Zellenabstand (der Abstand des Zellinhalts zum Zellenrahmen) notiert man mit dem cellpadding-Attribut des table-Elements. Beispiel:

<table cellpadding="3">
 ... Tabelleninhalt ...
</table>

<table border="2" cellpadding="0">
 ... Tabelleninhalt ...
</table> 

Ausrichtung  nach oben

Tablle, Zeilen und Zellen können jeweils separat horizontal ausgerichtet werden. Zeilen und Zellen können zusätzlich noch vertikal ausgerichtet werden.

Horizontale Ausrichtung

Die Tabelle sowie der Inhalt der Zellen und/oder Zeilen kann an bestimmte Angaben ausgerichtet werden. Mit dem align-Attribut des table-Elements richten sie die gesammte Tabelle, nicht aber deren Inhalt, aus. Das selbe Attribut im einleitenden tr- oder td/ht-Tag richtet jedoch den Inhalt der Zeilen bzw. Zellen aus. Mögliche Werte sind:

  • left - linksbündig
  • right - rechtsbündig
  • center - zentriert
  • justify - Blocksatz

Beispiel:

<table align="center">
 ... Tabelleninhalt ...
</table>

<table>
 <tr align="center">
  <td align="left">... Zelleninhalt linksbündig ... </td>
  <td>... Zelleninhalt zentriert ... </td>
 </tr>
</table> 

Vertikale Ausrichtung

Um Zellen und/oder Zeilen vertikal auszurichten benutzt man das valign-Attribut. Mögliche Werte sind:

  • top - am oberen Rand ausgerichtet
  • middle - in der Mitte stehend
  • bottom - am unteren Rand ausgerichtet
  • baseline - Ausrichtung an einer gemeinsamen Basislinie

Beispiel:

<table>
 <tr valign="middle">
  <td>... Zelleninhalt mittig ... </td>
  <td valign="bottom">
   ... Zelleninhalt unten ausgerichtet ...
  </td>
 </tr>
</table> 

<table>
 <tr>
  <td valign="top">... Zelleninhalt oben ausgerichtet ... </td>
  <td valign="baseline">
   ... Zelleninhalt an Basislinie ausgerichtet ... 
  </td>
 </tr>
</table> 

Außenabstand  nach oben

Um den äußeren Abstand der Tabelle zu anderen Objekten festzulegen benutzt man das hspace- und/oder das vspace-Attribut. Es beschreibt in Pixel- oder Prozentangaben wie weit ein anderes Objekt bei der Darstellung mindestens entfernt sein muss. vspace beschreibt hierbei den vertikalen (oberen und unteren) Abstand - hspace beschreibt den horizontalen (rechten und linken) Abstand. Beispiel:

<table hspace="300">
 ... Tabelleninhalt ... 
</table>

<table vspace="200">
 ... Tabelleninhalt ... 
</table>