HTML ändern · Anleitung

HTML: Tabelle erstellen und gestalten

Kurz gesagt: Eine Tabelle wird von außen nach innen gebaut: <table> ist der Rahmen, darin steht pro Zeile ein <tr>, und darin pro Zelle ein <td>. Kopfzellen heißen <th>. Rahmenlinien kommen nicht aus HTML, sondern aus CSS.

Die vollständige kleine Tabelle

<table>
  <tr>
    <th>Leistung</th>
    <th>Preis</th>
  </tr>
  <tr>
    <td>Erstgespräch</td>
    <td>kostenlos</td>
  </tr>
  <tr>
    <td>Begleitung</td>
    <td>490 €</td>
  </tr>
</table>

Die vier Bausteine

Tag	Bedeutet	Wofür
`<table>`	table	der Rahmen um die ganze Tabelle
`<tr>`	table row	eine Zeile
`<td>`	table data	eine Zelle mit Inhalt
`<th>`	table header	eine Kopfzelle — fett und zentriert

Merke die Reihenfolge: Zeilen zuerst, Spalten ergeben sich. Es gibt kein Tag für eine Spalte — die Spalten entstehen dadurch, dass jede Zeile gleich viele Zellen hat. Deshalb ist die häufigste Ursache für eine verrutschte Tabelle eine Zeile mit einer Zelle zu wenig.

<th> ist nicht nur „fett". Screenreader lesen bei jeder Zelle den zugehörigen Spaltennamen mit vor — aber nur, wenn die Kopfzeile aus <th> besteht. Wer die Kopfzeile stattdessen mit <td> und fetter Schrift baut, macht die Tabelle für blinde Nutzer unlesbar. Kostet nichts, also richtig machen.

Rahmen, Abstände, Zebrastreifen

Frisch angelegt sieht eine Tabelle nach nichts aus: kein Rahmen, kein Abstand. Das ist richtig so — das Aussehen gehört in CSS. Diese fünf Regeln decken fast alles ab:

table {
  border-collapse: collapse;   /* keine doppelten Linien */
  width: 100%;
}
th, td {
  border: 1px solid #ddd;      /* die Rahmenlinie */
  padding: .6rem .7rem;        /* Luft in der Zelle */
  text-align: left;            /* links statt zentriert */
  vertical-align: top;         /* oben ausrichten */
}
th {
  background-color: #f6f5ff;   /* Kopfzeile hervorheben */
}
tr:nth-child(even) td {
  background-color: #fafafa;   /* Zebrastreifen */
}

border-collapse: collapse ist die wichtigste Zeile. Ohne sie hat jede Zelle ihren eigenen Rahmen, und zwischen zwei Zellen liegen zwei Linien nebeneinander — die Tabelle sieht dann grob und altmodisch aus. Mit collapse teilen benachbarte Zellen eine Linie.

Das alte border-Attribut ist veraltet. In Anleitungen von früher steht <table border="1">. Das funktioniert teilweise noch, ist aber aus dem Standard entfernt und lässt sich nicht gestalten. Rahmen gehören in CSS.

Zellen verbinden

<tr>
  <td colspan="2">Über zwei Spalten</td>
</tr>
<tr>
  <td rowspan="2">Über zwei Zeilen</td>
  <td>rechts oben</td>
</tr>
<tr>
  <td>rechts unten</td>
</tr>

colspan zieht eine Zelle über mehrere Spalten, rowspan über mehrere Zeilen. Wichtig: Die verbundene Zelle ersetzt die Zellen, über die sie reicht. Bei colspan="2" hat die Zeile eine Zelle weniger — schreibst du trotzdem zwei, ragt die Tabelle über den Rand.

Kopf und Körper trennen

<table>
  <thead>
    <tr><th>Monat</th><th>Umsatz</th></tr>
  </thead>
  <tbody>
    <tr><td>Januar</td><td>1.200 €</td></tr>
  </tbody>
</table>

Bei kleinen Tabellen optional, bei langen sinnvoll: Beim Drucken wiederholt der Browser den <thead> auf jeder Seite, und die Kopfzeile lässt sich beim Scrollen oben festhalten.

Tabellen auf dem Handy

Das ist der Punkt, an dem die meisten Tabellen kaputtgehen. Eine Tabelle mit vier Spalten ist auf 390 Pixel Breite nicht unterzubringen — sie sprengt die Seite, und plötzlich lässt sich die ganze Seite seitlich schieben.

Die Lösung ist ein Behälter, der scrollt statt zu sprengen:

<div class="table-scroll">
  <table> … </table>
</div>

.table-scroll {
  overflow-x: auto;
}

Damit scrollt nur die Tabelle seitlich, die Seite bleibt ruhig. Zwei Zeilen, und das häufigste Handy-Problem ist weg.

Die bessere Frage: Braucht es überhaupt eine Tabelle? Für echte Daten mit Zeilen und Spalten — ja. Für eine Liste von Vorteilen oder ein Layout mit zwei Spalten nebeneinander: nein. Tabellen als Layout-Werkzeug zu missbrauchen war in den 1990ern üblich und ist heute die Ursache für Seiten, die auf dem Handy auseinanderfallen. Nimm dafür eine Liste oder CSS.

Die vier häufigsten Fehler

Ungleich viele Zellen pro Zeile. Die Tabelle verrutscht — zähle nach.
<td> direkt in <table>. Zellen gehören immer in ein <tr>.
border-collapse vergessen. Doppelte Linien zwischen allen Zellen.
Kein Scroll-Behälter. Auf dem Handy sprengt die Tabelle die Seite.

Dasselbe ohne Code: anklicken statt tippen

Eine Tabelle neu zu bauen ist Code-Arbeit. Eine bestehende zu ändern — einen Preis, ein Wort, eine Zeile — ist genau der Fall, für den PageFix gebaut ist: ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten.

Im Code

Richtige Zelle im HTML finden — bei einer 6×4-Tabelle sind das 24 ähnlich aussehende Stellen —, Inhalt ersetzen, Zellenzahl prüfen, speichern, neu laden.

Per Klick

Zelle auf der fertigen Seite anklicken und überschreiben. Du siehst sofort, welche Zelle du triffst — statt im Code zu zählen, welches <td> das dritte in der vierten Zeile ist.

Einmalzahlung von 49 €, kein Abo, Updates inklusive.

Häufige Fragen

Wie erstelle ich eine Tabelle in HTML?

Mit <table> als Rahmen, darin pro Zeile ein <tr> und darin pro Zelle ein <td>. Die Kopfzeile besteht aus <th>-Zellen. Es gibt kein Tag für eine Spalte — Spalten entstehen dadurch, dass jede Zeile gleich viele Zellen hat.

Was ist der Unterschied zwischen td und th?

<td> ist eine normale Datenzelle, <th> eine Kopfzelle. <th> erscheint fett und zentriert, und Screenreader lesen bei jeder Datenzelle den zugehörigen Spaltennamen mit vor — das funktioniert nur, wenn die Kopfzeile wirklich aus <th> besteht.

Wie bekomme ich Rahmenlinien in meine Tabelle?

Über CSS: border: 1px solid #ddd an th, td, und dazu border-collapse: collapse an der Tabelle. Ohne collapse liegen zwischen zwei Zellen zwei Linien nebeneinander. Das alte Attribut <table border="1"> ist aus dem Standard entfernt.

Wie verbinde ich zwei Zellen?

Mit colspan über mehrere Spalten und rowspan über mehrere Zeilen, zum Beispiel <td colspan="2">. Die verbundene Zelle ersetzt die Zellen, über die sie reicht — die Zeile hat dann entsprechend weniger Zellen.

Warum verrutscht meine Tabelle?

Meistens, weil eine Zeile mehr oder weniger Zellen hat als die anderen. Zähle die <td> pro Zeile nach und denke daran, dass eine Zelle mit colspan="2" für zwei zählt. Zweite häufige Ursache: ein <td> steht direkt in <table> statt in einem <tr>.

Wie mache ich eine Tabelle handytauglich?

Setze sie in einen Behälter mit overflow-x: auto. Dann scrollt nur die Tabelle seitlich, statt die ganze Seite zu sprengen. Zwei Zeilen CSS lösen damit das häufigste Handy-Problem mit Tabellen.

Jetzt starten

Erst ausprobieren? Öffne die Demo — der echte Editor, ohne Konto.

Zuletzt aktualisiert: 12. September 2026

← Zurück zur Startseite und PageFix ansehen