HTML-Tabelle erstellen: Tabellen-Generator
HTML-Tabelle erstellen: Zellen im Editor ausfüllen oder CSV einfügen und sauberen Code mit thead, tbody, caption und optionalem CSS kopieren.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
HTML-Tabelle mit thead und tbody
Mit dem HTML-Tabellen-Generator können Sie eine HTML-Tabelle erstellen, ohne den Code von Hand zu tippen. Legen Sie Zeilen und Spalten fest, füllen Sie die Zellen im Editor aus und kopieren Sie den fertigen Code. Der Generator schreibt sauberes, barrierearmes Markup mit dem table-Tag: eine Kopfzeile in <thead> mit <th scope="col">, die Daten in <tbody> und auf Wunsch eine Tabellenüberschrift als <caption>. Die Trennung in thead und tbody hilft Screenreadern, Kopfzellen den Daten zuzuordnen.
Vorhandene Daten müssen Sie nicht abtippen: Fügen Sie CSV mit Komma oder Semikolon oder direkt aus Excel kopierte Zellen ein, und der Generator macht aus der CSV in HTML-Tabelle-Form eine fertige Tabelle. Anführungszeichen nach RFC 4180 werden beachtet. Sonderzeichen wie < und & in Zellen werden automatisch maskiert. Zur Gestaltung können Sie eine CSS-Klasse mit kleinem style-Block wählen oder Inline-Styles, die auch in HTML-E-Mails funktionieren, in denen style-Blöcke oft entfernt werden.
Grenzen: Verbundene Zellen mit colspan und rowspan erzeugt der Generator nicht; ergänzen Sie sie bei Bedarf im Code. Tabellen sind für tabellarische Daten gedacht, nicht für das Seitenlayout; dafür gibt es CSS Grid und Flexbox. Für Markdown statt HTML nutzen Sie den Markdown-Tabellen-Generator, für JSON-Daten CSV in JSON.
Anleitung: HTML-Tabelle erstellen in 4 Schritten
- Die Anzahl der Zeilen und Spalten festlegen oder unter „CSV oder Excel-Zellen übernehmen“ vorhandene Daten einfügen.
- Die Zellen im Editor ausfüllen und optional eine Tabellenüberschrift (caption) angeben.
- „Erste Zeile als Kopfzeile“ und „Erste Spalte als Zeilenkopf“ setzen und die Gestaltung wählen: ohne CSS, mit CSS-Klasse oder mit Inline-Styles.
- In der Vorschau prüfen und den HTML-Code kopieren.
Typische Anwendungsfälle
- Eine Preisliste oder einen Öffnungszeiten-Plan für eine Website schnell als HTML-Tabelle erstellen.
- Eine aus Excel kopierte Tabelle in eine HTML-E-Mail einfügen, mit Inline-Styles für Mailprogramme.
- Barrierearme Tabellen mit thead, th und scope für Screenreader erzeugen.
Häufige Fragen
Wie ist eine HTML-Tabelle aufgebaut?
Eine Tabelle beginnt mit dem table-Tag. Darin stehen Zeilen als tr, Kopfzellen als th und Datenzellen als td. Kopfzeilen gehören in thead, die Daten in tbody, eine Überschrift in caption direkt nach dem öffnenden table-Tag.
Wozu dient scope bei th?
scope="col" sagt, dass die Kopfzelle für die Spalte darunter gilt, scope="row" für die Zeile daneben. Screenreader lesen damit zu jedem Wert den passenden Kopf vor. Bei einfachen Tabellen ist es nicht zwingend, schadet aber nie.
Kann ich eine Excel-Tabelle in HTML umwandeln?
Ja. Markieren Sie die Zellen in Excel, kopieren Sie sie und fügen Sie sie in das Feld „CSV oder Excel-Zellen übernehmen“ ein. Excel kopiert mit Tabulatoren; der Generator erkennt das Trennzeichen automatisch.
Welche Gestaltung eignet sich für E-Mails?
Für HTML-E-Mails wählen Sie „Mit Inline-Styles“. Viele Mailprogramme entfernen style-Blöcke im Kopf, Inline-Styles direkt an den Zellen bleiben dagegen meist erhalten.
Wie mache ich eine Tabelle auf dem Smartphone lesbar?
Packen Sie die Tabelle in ein div mit overflow-x: auto. Dann lässt sie sich auf schmalen Bildschirmen seitlich wischen, statt die Seite zu sprengen.
Wie füge ich eine HTML-Tabelle in WordPress ein?
Im Block-Editor einen Block „Individuelles HTML“ einfügen und den kopierten Code hineinsetzen. Alternativ bietet WordPress einen eigenen Tabellen-Block, der aber weniger Einstellungen für Kopfzellen und caption hat.
Wie mache ich Rahmenlinien in einer HTML-Tabelle?
Mit CSS, etwa border: 1px solid an td und th sowie border-collapse: collapse an der Tabelle, damit keine doppelten Linien entstehen. Die Gestaltungen mit CSS-Klasse oder Inline-Styles im Generator enthalten bereits Rahmen.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen