Tabellen in HTML richtig einsetzen

Tabellen gehören zu den ältesten HTML-Elementen und werden trotzdem oft falsch benutzt. Früher hat man ganze Webseiten mit Tabellen gebaut. Heute weiß man: Tabellen sind für Daten da. Genau dann sind sie aber immer noch extrem nützlich.

Immer wenn Informationen logisch in Zeilen und Spalten gehören, ist eine Tabelle das richtige Mittel. Preise, Vergleiche, Listen mit festen Werten oder technische Daten lassen sich so sehr gut darstellen. Wichtig ist nur, dass man Tabellen nicht zweckentfremdet.

Grundaufbau einer Tabelle

Eine HTML-Tabelle besteht aus mehreren Elementen. Das äußere Element ist <table>. Darin gibt es Zeilen (<tr>) und Zellen. Normale Zellen heißen <td>, Überschriften-Zellen <th>.

<table>
  <tr>
    <th>Name</th>
    <th>Preis</th>
  </tr>
  <tr>
    <td>Produkt A</td>
    <td>19,90 €</td>
  </tr>
</table>

Der Browser erkennt automatisch, dass es sich um tabellarische Daten handelt. Das ist nicht nur für die Anzeige wichtig, sondern auch für Screenreader und andere Hilfsmittel. Saubere Struktur zahlt sich hier doppelt aus.

th vs. td – kleiner Unterschied, große Wirkung

<th> steht für “table header”. Diese Zellen beschreiben, was in der jeweiligen Spalte oder Zeile steht. Screenreader nutzen diese Information, um Zusammenhänge besser zu erklären.

Rein optisch kann man mit CSS fast alles gleich aussehen lassen, aber semantisch macht es einen Unterschied. Darum: Überschriften immer als th auszeichnen, nicht einfach fett machen.

Tabellen gestalten mit CSS

Ohne CSS sehen Tabellen oft sehr roh aus. Mit ein paar Regeln werden sie deutlich lesbarer. Typische Dinge sind Rahmen, Abstände und unterschiedliche Hintergrundfarben.

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #666;
  padding: 6px;
}

th {
  background: #ddd;
}

border-collapse sorgt dafür, dass Rahmen nicht doppelt erscheinen. Abstände machen Inhalte lesbarer. Mehr braucht es oft nicht. Auch hier gilt: lieber schlicht als überladen.

Wann Tabellen sinnvoll sind

Tabellen sind ideal für:

• Preislisten
• Vergleiche
• technische Daten
• Terminübersichten
• Auswertungen

Sie sind nicht geeignet für Seitenlayout, Spaltenaufteilung oder Design-Spielereien. Dafür gibt es CSS. Wer Tabellen zweckentfremdet, baut sich langfristig Probleme ein, gerade auf mobilen Geräten.

Tabellen und Responsive Design

Tabellen können auf kleinen Bildschirmen schwierig werden. Viele Spalten passen nicht mehr nebeneinander. Darum sollte man Tabellen bewusst einsetzen und nicht zu breit machen.

Kleine Tricks sind z.B. horizontales Scrollen oder das Reduzieren auf das Wesentliche. In manchen Fällen ist es besser, Inhalte umzustrukturieren statt alles in eine Tabelle zu pressen.

Wichtig ist: testen. Was auf dem Desktop gut aussieht, kann auf dem Handy unlesbar sein. Ein kurzer Check spart später Ärger.

Typische Fehler

Diese Dinge sieht man leider oft:

• Tabellen für komplettes Layout
• fehlende th-Zellen
• keine Abstände, alles klebt
• zu viele Spalten
• Tabellen ohne echten Nutzen

Die Lösung ist meist simpel: Zweck prüfen, vereinfachen, klar strukturieren. Tabellen sind kein Notbehelf, sondern ein Werkzeug.