1. Startseite
2. HTML
3. Tabellen

Tabellen

Tabellen werden in HTML verwendet, um Daten in einer tabellarischen Übersicht darzustellen. Zu früheren Internetzeiten wurden sogar gesamte Webseiten mithilfe der tabellarischen Darstellung designt.

Eine einfache Tabelle

Für eine einfache Tabelle benötigen wir 3 Tag´s. Das <table>-Tag bezeichnet einen Bereich, in dem eine Tabelle erstellt wird. Das <tr>-Tag steht für "table row" und erzeugt eine neue Zeile in der Tabelle. Das <td>-Tag steht für "table data" und erzeugt ein neues Datenfeld in einer Zeile. Die Anzahl der <td>-Tag´s in einer Zeile ergibt die Anzahl der Spalten in der Tabelle.

<table>
 <tr><td>Zeile 1 / Spalte 1</td><td>Zeile 1 / Spalte 2</td></tr>
 <tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
 <tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
</table>

Das Ergebnis ist eine Tabelle mit 3 Zeilen und 2 Spalten.

Tabellen gestaltet man grundsätzlich über CSS, aber um einen einfachen Rahmen in HTML zu erzeugen, kann man auch das Attribut "border" vergeben, der Wert "1" legt eine dünne Rahmenlinie um die Elemente.

Es ist gut möglich, das der Codeeditor dieses Vorgehen bemängelt, aber der Browser kann es in der Regel trotzdem verarbeiten.

<table border="1">
 <tr><td>Zeile 1 / Spalte 1</td><td>Zeile 1 / Spalte 2</td></tr>
 <tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
 <tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
</table>

Eine Tabelle mit Kopfzeile

Um der Tabelle eine Kopfzeile zu geben, wird das <td>-Tag in der ersten Zeile durch das <th>-Tag für table header ersetzt.

<table border="1">
 <tr><th>Zeile 1 / Spalte 1</th><th>Zeile 1 / Spalte 2</th></tr>
 <tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
 <tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
</table>

Der Browser reagiert auf das <th>-Tag und lässt die Schrift in diesen Bereich größer erscheinen.

Eine erweiterte Tabelle

Eine erweiterte Tabelle wird weiter in Kopf, Körper und Fuß unterteilt. Der Kopfbereich wird durch das <thead>-Tag gekennzeichnet, welches für "tablehead" steht. Der Hauptteil der Tabelle wird in den Tabellenkörper gepackt, <tbody> steht für "tablebody". Der Fuß der Tabelle steht in dem <tfoot>-Tag, welches für "tablefoot" steht.

<table border="1">
 <thead>
  <tr><th>Zeile 1 / Spalte 1</th><th>Zeile 1 / Spalte 2</th></tr>
 </thead>
 <tbody>
  <tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
  <tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
 </tbody>
 <tfoot>
  <tr><td>Zeile 4 / Spalte 1</td><td>Zeile 4 / Spalte 2</td></tr>
 </tbody>
</table>

Der große Vorteil dieser Einteilung zeigt sich erst so richtig, wenn man eine große Datenmenge auf Papier ausdrucken möchte. Wenn der Datensatz nicht auf ein Blatt passen sollte, wird der "tablehead" und der "tablefoot", also jeweils der Kopf- und Fuß- Bereich mit auf die nachfolgenden Seiten ausgedruckt.