Tabellen¶

Eine Tabelle ist eine geordnete Darstellung von Daten oder Texten in Zeilen (waagerecht) und Spalten (senkrecht). Tabellen eignen sich besonders für strukturierte Informationen wie Preislisten, Stundenpläne oder Kontakte.

In HTML werden Tabellen mit dem Element <table> erstellt. Eine Tabelle besteht aus:

Zeilen: <tr> (table row)
Spaltenüberschriften: <th> (table header)
Datenzellen: <td> (table data)

Grundstruktur einer Tabelle¶

<table>
  <tr>
    <th>Überschrift 1</th>
    <th>Überschrift 2</th>
  </tr>
  <tr>
    <td>Daten 1</td>
    <td>Daten 2</td>
  </tr>
</table>

<table>¶

Das Element <table> ist der äußere Rahmen einer Tabelle. Ohne dieses Element kann keine Tabelle dargestellt werden. Alle Bestandteile der Tabelle – also Zeilen, Überschriften und Datenzellen – müssen innerhalb von <table> stehen.

<tr>¶

Das Element <tr> steht für table row (Tabellenzeile). Mit <tr> wird immer eine komplette Zeile in der Tabelle erzeugt.

Wichtig

Zuerst werden die Zeilen definiert, dann die Spalten mit den einzelnen Zellen ( oder ).

<th>¶

Das Element <th> steht für table header. Es wird verwendet, um Überschriften für Spalten oder Zeilen zu erstellen.

Eigenschaften von <th>:

Der Text wird automatisch fett dargestellt
Der Text wird zentriert ausgerichtet
<th> erzeugt immer eine Spalte

Typischer Einsatz:

Überschriften in der ersten Tabellenzeile
Überschriften in der ersten Spalte (z. B. Namen, Kategorien)

<td>¶

Das Element <td> steht für table data. Es enthält die eigentlichen Daten der Tabelle, also Informationen, Werte oder Texte.

Eigenschaften von <td>:

Enthält normale Tabelleninhalte
Wird standardmäßig links ausgerichtet
<td> erzeugt immer eine Spalte

Kann Text, Zahlen, Bilder oder sogar andere HTML-Elemente enthalten

Tabellenrahmen¶

Standardmäßig haben Tabellen keinen sichtbaren Rahmen. Mit dem Attribut border kann ein Rahmen angezeigt werden:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Telefon</th>
  </tr>
  <tr>
    <td>Max Mustermann</td>
    <td>123456</td>
  </tr>
</table>

Je höher der Wert von border, desto dicker der Rahmen.

Name	Telefon
Max Mustermann	123456

Datenzellen über mehrere Spalten¶

Mit colspan kann eine Zelle mehrere Spalten einnehmen:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Telefonnummern</th>
  </tr>
  <tr>
    <td>Howard Stark</td>
    <td>555-12345</td>
    <td>555-678910</td>
  </tr>
</table>

colspan="2" bedeutet: die Zelle erstreckt sich über zwei Spalten.
Die Summe von colspan und den anderen Spalten in der Zeile darf die Gesamtanzahl der Spalten nicht überschreiten.

Name	Telefonnummern
Howard Stark	555-12345	555-678910

Datenzellen über mehrere Zeilen¶

Mit rowspan kann eine Zelle mehrere Zeilen einnehmen:

<table border="1">
  <tr>
    <th>Name:</th>
    <td>Howard Stark</td>
  </tr>
  <tr>
    <th rowspan="2">Telefonnummern</th>
    <td>555-12345</td>
  </tr>
  <tr>
    <td>555-678910</td>
  </tr>
</table>

rowspan="2" bedeutet: die Zelle erstreckt sich über zwei Zeilen.
Die Summe von rowspan und den anderen Zeilen darf die Gesamtanzahl der Zeilen nicht überschreiten.

Name:	Howard Stark
Telefonnummern	555-12345
Telefonnummern	555-678910

Erweiterte Struktur (optional)¶

Für größere Tabellen kann man die Tabelle in Kopf, Körper und Fuß unterteilen:

<thead>: Kopfbereich (meist Überschriften)
<tbody>: Hauptbereich (Daten)
<tfoot>: Fußbereich (Summen, Hinweise)

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Telefon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Max Mustermann</td>
      <td>123456</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Summe</td>
      <td>1</td>
    </tr>
  </tfoot>
</table>

Vorteil: <thead> und <tfoot> erleichtern die Formatierung und die Barrierefreiheit.