<table>
…
</table>

<table border="1">
…
</table>

<table border="1">
   <tr></tr>
</table>

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

<table border="1">
   <tr>
      <td>Inhalt 1</td>
   </tr>
</table>

Erst jetzt lohnt ein Blick auf das Ergebnis im Browser.

<table border="1">
   <tr>
      <td>Inhalt 1</td>
      <td>Inhalt 2</td>
   </tr>
</table>

Auch hier wieder ein Blick auf das Ergebnis.

<table border="1">
   <tr>
      <td>Inhalt 1</td>
      <td>Inhalt 2</td>
   </tr>
   <tr>
      <td>Inhalt 3</td>
      <td>Inhalt 4</td>
   </tr>
</table>

Ein Blick auf das Ergebnis im Browser liefert folgendes Ergebnis:





Auf diese Weise könnt ihr also auch umfangreiche Tabellen erstellen.

Kopf, Körper und Fuß festlegen

Tabellen lassen sich in logische Bereiche einteilen. Dabei handelt es sich um einen Kopf-, einen oder mehrere Datenbereiche und einen Fußbereich. Das folgende Beispiel zeigt, wie so etwas aussehen kann:

<table border="1">
  <thead>
    <tr>
      <th>Abfahrt</th>
      <th>Ankunft</th>
      <th>Bahnsteig</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlin</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>1</td>
    </tr>
    <tr>
      <td>München</td>
      <td>Berlin</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Spalten vordefinieren

Wie die Tabelle von den Browsern angezeigt wird, hängt natürlich in erster Linie von der vorhandenen Anzahl an Zeilen und Spalten ab. Der Prozess, eine Tabelle anzuzeigen, ist für den Browser allerdings nicht ganz einfach. Tatsächlich muss ein Browser nämlich immer erst die gesamte Tabelle einlesen, bevor er die Tabelle anzeigen kann. Gerade bei sehr umfangreichen Tabellen kann das natürlich eine gewisse Zeit in Anspruch nehmen. Dieses Problem lässt sich umgehen, indem man dem Browser direkt mitteilt, aus wie vielen Spalten die Tabelle tatsächlich besteht.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titel</th>
     <th>Preis</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Eine kurze Geschichte von fast allem</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titel</th>
     <th>Preis</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Eine kurze Geschichte von fast allem</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

Es gibt übrigens auch noch eine Mischform.

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

Das ist immer dann praktisch, wenn eine Spalte separat vordefiniert werden soll, man die anderen aber in einer Gruppe zusammenfassen möchte.