Tabellen in HTML

In HTML werden Tabellen mit dem <table>-Element erstellt. Eine einfache Tabelle besteht aus Tabellenzeilen (<tr> - table row) und Tabellenzellen, die entweder als Datenzellen (<td> - table data) oder Kopfzellen (<th> - table header) definiert werden.

<table>
  <tr>
    <th>Kopfzelle 1</th>
    <th>Kopfzelle 2</th>
  </tr>
  <tr>
    <td>Zelle 1,1</td>
    <td>Zelle 1,2</td>
  </tr>
  <tr>
    <td>Zelle 2,1</td>
    <td>Zelle 2,2</td>
  </tr>
</table>

Tabellenüberschrift mit Caption

Das <caption>-Element definiert eine Überschrift oder Beschreibung für die gesamte Tabelle. Es sollte direkt nach dem öffnenden <table>-Tag platziert werden.

<table>
  <caption>
    Mitarbeiterverzeichnis der IT-Abteilung
  </caption>
  <tr>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>Max Mustermann</td>
    <td>Web Developer</td>
  </tr>
</table>

Die Tabellenüberschrift hilft Nutzern, den Inhalt der Tabelle schneller zu verstehen, und verbessert die Zugänglichkeit für Screenreader-Nutzer.

Semantische Tabellenstruktur

Für komplexere Tabellen bietet HTML semantische Elemente, um die Tabelle in logische Abschnitte zu gliedern:

<thead>: Gruppiert die Kopfzeilen der Tabelle
<tbody>: Enthält den Hauptinhalt der Tabelle
<tfoot>: Gruppiert die Fusszeilen der Tabelle

<table>
  <caption>
    Übersicht der Mitarbeiter
  </caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Abteilung</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Max Mustermann</td>
      <td>Senior Developer</td>
      <td>IT</td>
    </tr>
    <tr>
      <td>Maria Musterfrau</td>
      <td>Product Manager</td>
      <td>Marketing</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Stand: April 2025</td>
    </tr>
  </tfoot>
</table>

Diese semantische Struktur verbessert nicht nur die Zugänglichkeit, sondern ermöglicht auch ein einfacheres Styling mit CSS.

Zellen kombinieren

HTML ermöglicht es, Zellen horizontal (colspan) oder vertikal (rowspan) zu kombinieren:

<!-- Horizontales Zusammenfassen von Zellen -->
<tr>
  <td colspan="2">Diese Zelle erstreckt sich über 2 Spalten</td>
  <td>Normale Zelle</td>
</tr>

<!-- Vertikales Zusammenfassen von Zellen -->
<tr>
  <td rowspan="2">Diese Zelle erstreckt sich über 2 Zeilen</td>
  <td>Zelle 1,2</td>
</tr>
<tr>
  <!-- Keine Zelle hier, da rowspan aus vorheriger Zeile -->
  <td>Zelle 2,2</td>
</tr>

Beim Verwenden von rowspan ist zu beachten, dass in den folgenden Zeilen entsprechend weniger Zellen definiert werden müssen, da die vertikal gespannte Zelle den Platz bereits einnimmt.

Tabellenstyling mit HTML-Attributen

Obwohl CSS die bevorzugte Methode zum Styling von Tabellen ist, unterstützt HTML auch einige Attribute für grundlegendes Styling:

<table border="1" cellspacing="0" cellpadding="5" width="100%">
  <!-- Tabelleninhalt -->
</table>

Diese HTML-Attribute bieten folgende Funktionen:

border: Legt die Breite des Tabellenrahmens in Pixeln fest. Der Wert “1” erzeugt einen schmalen Rahmen um die gesamte Tabelle und jede Zelle.
cellspacing: Definiert den Abstand zwischen benachbarten Zellen in Pixeln. Der Wert “0” lässt die Zellen direkt aneinander grenzen ohne Zwischenraum.
cellpadding: Bestimmt den inneren Abstand zwischen Zelleninhalt und Zellenrand in Pixeln. Der Wert “5” schafft einen 5-Pixel-Innenabstand in jeder Richtung.
width: Legt die Gesamtbreite der Tabelle fest, entweder in Pixeln (z.B. “500”) oder als Prozentsatz der Elternelementbreite (z.B. “100%”).

Weitere mögliche Attribute sind:

height: Bestimmt die Höhe der Tabelle in Pixeln oder als Prozentsatz.
align: Positioniert die Tabelle in Bezug auf das umgebende Element (Werte: “left”, “center”, “right”).
bgcolor: Setzt die Hintergrundfarbe der Tabelle (z.B. “#f0f0f0” oder “lightgray”).

Zugriffshilfe für Tabellen

Für eine bessere Zugänglichkeit können Tabellenkopfzellen mit dem scope-Attribut versehen werden, um anzugeben, ob sie sich auf Spalten (col) oder Zeilen (row) beziehen:

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Alter</th>
  </tr>
  <tr>
    <th scope="row">Max</th>
    <td>28</td>
  </tr>
  <tr>
    <th scope="row">Maria</th>
    <td>32</td>
  </tr>
</table>

Dies hilft Screenreadern, die Beziehung zwischen Kopfzellen und Datenzellen korrekt zu interpretieren.

Übung: Tabelle erstellen

Erstellen Sie eine neue Seite “blog-planung.html” für Ihren Blog:

Mit der üblichen Navigation und Struktur wie Ihre anderen Seiten
Mit einer Hauptüberschrift “Mein Blog-Plan”

Erstellen Sie eine einfache Wochenplan-Tabelle:

Fügen Sie eine passende Tabellenüberschrift mit <caption> hinzu (z.B. “Mein wöchentlicher Blog-Zeitplan”)
Erstellen Sie eine Tabelle mit 4 Spalten:
- Tag (Mo - So)
- Thema/Aktivität
- Zeitaufwand (in Stunden)
- Status
Tragen Sie für jeden Wochentag ein, was Sie für Ihren Blog planen
Verwenden Sie <th> für alle Spaltenüberschriften

Erstellen Sie eine “Meine Lieblingsblogs”-Tabelle:

Fügen Sie eine zweite Tabelle auf derselben Seite hinzu
Diese Tabelle soll mindestens 3 Spalten haben:
- Name des Blogs
- Hauptthema
- Warum ich ihn mag
Führen Sie mindestens 4 Blogs auf, die Sie inspirieren oder regelmässig lesen
Verwenden Sie für alle Spaltenüberschriften <th>-Elemente

Erweitern Sie Ihre zweite Tabelle:

Fügen Sie eine vierte Spalte “Bewertung” hinzu
Tragen Sie eine Bewertung mit Sternen ein (z.B. ”★★★★☆” für 4 von 5 Sternen)
Fügen Sie eine Fusszeile mit dem Text “Meine Bewertungsskala: ★ = ok, ★★★★★ = hervorragend” hinzu
Diese Fusszeile soll sich über alle Spalten erstrecken (verwenden Sie colspan)

Bonus

Erstellen Sie auf Ihrer “Über mich”-Seite eine einfache “Meine Fähigkeiten”-Tabelle, die zeigt, welche Blog- oder Webdesign-Fähigkeiten Sie bereits beherrschen und welche Sie noch lernen möchten. Verwenden Sie zwei Spalten für “Fähigkeit” und “Niveau”, wobei Sie das Niveau entweder als Text (Anfänger, Fortgeschritten, Experte) oder mit Sternen (★ bis ★★★★★) darstellen.