HTML-Tabellen-Generator

Füge Tabellendaten aus Excel, Google Tabellen oder CSV ein und erhalte fertigen, barrierefreien HTML-Code – mit Live-Vorschau.

Alles läuft lokal. Für responsive Tabellen auf schmalen Bildschirmen setze die Tabelle in einen Container mit overflow-x:auto. Zellinhalte werden als Text maskiert (kein HTML-Code in Zellen).

Der Tabellen-Generator wandelt kopierte Tabellendaten (Tabulator-getrennt aus Excel/Google Tabellen oder CSV) in HTML-Code um. Du legst fest, ob die erste Zeile eine Kopfzeile ist, fügst Titel (caption), CSS-Klasse und einfache Inline-Styles hinzu, wählst die Ausrichtung und erhältst zusätzlich eine Markdown-Version. Der Code nutzt thead, tbody und scope-Attribute für Barrierefreiheit.

So erzeugst du eine HTML-Tabelle

  1. Daten kopierenMarkiere den Bereich in Excel oder Google Tabellen und füge ihn ein. Auch CSV mit Semikolon oder Komma funktioniert.
  2. Optionen wählenEntscheide, ob die erste Zeile Kopfzeile ist, und füge bei Bedarf Titel, Klasse und Stil hinzu.
  3. Code übernehmenKopiere den HTML-Code in deine Seite. Für Wikis und README-Dateien steht eine Markdown-Version bereit.

Aufbau einer barrierefreien Tabelle

ElementZweck
<table>Umschließt die gesamte Tabelle
<caption>Titel der Tabelle für Screenreader und Suchmaschinen
<thead>, <tbody>Trennen Kopf- und Datenbereich
<th scope="col">Kopfzelle einer Spalte (Screenreader ordnen Daten zu)
<td>Datenzelle

Wann Tabellen die richtige Wahl sind

Tabellen sind für tabellarische Daten gedacht: Preislisten, Vergleiche, Fahrpläne, Messwerte. Sie eignen sich nicht mehr zum Layouten von Seiten – dafür gibt es CSS mit Flexbox und Grid. Eine gute Tabelle hat eine klare Kopfzeile, wenige Spalten und knappe Zellinhalte. Suchmaschinen können aus gut strukturierten Tabellen Antworten ableiten, etwa für Vergleichs- und Preisabfragen.

Auf Smartphones werden breite Tabellen schnell unbrauchbar. Setze sie dann in einen scrollbaren Container, reduziere Spalten oder zeige Daten als Karten. Der einfache Stil hier soll als Ausgangspunkt dienen; die endgültige Gestaltung gehört in deine Stylesheets.

Tipps

  • Verwende für Zahlen ein einheitliches Format (Dezimalkomma, Tausenderpunkte) und richte sie rechtsbündig aus.
  • Fasse Zellen nur mit colspan/rowspan zusammen, wenn es unvermeidbar ist – sie erschweren Screenreader-Nutzern die Orientierung.
  • Nutze eine Zebra-Färbung (nth-child) für lange Tabellen.
  • Vermeide leere Zellen ohne Erklärung; schreibe „–“ oder „keine Angabe“.

Wofür du den Tabellen-Generator brauchst

Eine Preisliste steht in Excel, und die Webseite soll sie zeigen. Du markierst den Bereich, fügst ihn in das Datenfeld ein und erhältst sofort Code mit thead, tbody und scope-Attributen. Titel, CSS-Klasse und Stil wählst du so, dass die Tabelle zur bestehenden Seite passt, und in der Vorschau siehst du das Ergebnis, bevor du kopierst.

Für eine README oder ein Wiki steht zusätzlich die Markdown-Fassung bereit – derselbe Datenblock, zwei Ausgaben, ohne dass du Zeilen von Hand überträgst. Preis- und Mengenspalten rückst du mit der Option für Zahlen rechtsbündig ein, damit Zahlen in der Tabelle sauber ausgerichtet sind.

Auch dort, wo kein Tabellenwerkzeug im Redaktionssystem steckt, ersetzt der Generator das Zusammensetzen von Code von Hand: Einfügen, Einstellungen wählen, HTML kopieren. Die Vorschau aktualisiert sich beim Tippen, du musst also nichts speichern, um das Ergebnis zu sehen.

Mögliche Fehler und schnelle Lösungen

  • Spalten verrutschen: Die Erkennung sieht sich die erste Zeile an und sucht Tabs, Semikolon, Komma oder Pipe. Kommt die Quelle mit anderem Trennzeichen, mischen sich Werte – mit dem CSV-Trennzeichen ändern stellst du das Trennzeichen vorher um.
  • Kopfzeile fehlt im Code: Ohne den Haken für die erste Zeile wandert auch die Überschrift in den Datenbereich. Den Haken setzen, dann entstehen Kopfzellen mit scope-Attribut.
  • Zellen enthalten doppelte Maskierungen: Bereits maskierter HTML-Code wird ein zweites Mal maskiert. Rohdaten aus Excel oder CSV einfügen, nicht kopierten Quelltext.
  • Zahlen bleiben linksbündig: Die rechte Ausrichtung greift nur für Spalten, in denen jede gefüllte Zelle wie eine Zahl aussieht. Ein einzelner Text in derselben Spalte hebt die Erkennung auf.
  • Rahmen und Zebra fehlen: Der Stil ohne Formatierung liefert bewusst unbemalten Code. Rahmen als Inline-Style oder als style-Block auswählen – die Vorschau zeigt den Unterschied sofort.

Wer vom fertigen Tabellen-Code profitiert

Zuerst für Webentwicklerinnen und Entwickler, die schnell eine Tabelle brauchen, ohne jeden Tag Tabellen-Code zu schreiben, und für Redaktionen, die in einem CMS ohne Tabellenwerkzeug arbeiten. Dazu kommen Dokumentationsverantwortliche, die Handbücher und README-Dateien pflegen, sowie Teams aus Buchhaltung und Controlling, die Tabellen aus der Kalkulation in Berichte übernehmen. Auch beim Bauen von E-Mail-Vorlagen kommt der fertige Code zum Einsatz, weil dieselben Grundstrukturen dort gebraucht werden.

Wer die Tabelle nur als Markdown braucht, kopiert die untere Ausgabe direkt; für den eingerückten Code eines kompletten Dokuments ist der HTML-Formatter die schnellere Wahl, und zum Weiterbearbeiten von Text steht der Markdown-Editor bereit.

Datenschutz & Prüfung: Dieses Tool arbeitet vollständig lokal in deinem Browser – Eingaben und Dateien werden nicht hochgeladen oder gespeichert. Funktion geprüft: Oktober 2026.

Passende Tools

Web & Code

CSV in JSON umwandeln

CSV-Tabellen in JSON umwandeln – mit Trennzeichen-Erkennung und automatischer Typumwandlung.

Zum Tool Web & Code

HTML-Formatter & Minifier

HTML formatieren und einrücken oder minimieren – mit Erhalt von pre, script und style.

Zum Tool Web & Code

Markdown-Editor mit Live-Vorschau

Markdown schreiben und live als HTML ansehen – mit Export als HTML und .md-Datei.

Zum Tool

Häufige Fragen

Wie mache ich aus einer Excel-Tabelle eine HTML-Tabelle?

Zellbereich kopieren, hier einfügen und den erzeugten HTML-Code übernehmen.

Was ist der Unterschied zwischen th und td?

th ist eine Kopfzelle (Überschrift), td eine normale Datenzelle. Mit scope="col" ordnen Screenreader Datenzellen der Spalte zu.

Werden Sonderzeichen in Zellen richtig behandelt?

Ja. <, > und & werden als HTML-Entities maskiert, damit der Code korrekt bleibt.

Kann ich die Tabelle responsiv machen?

Setze sie in einen Container mit overflow-x:auto oder gestalte sie mit CSS für schmale Bildschirme um.

Gibt es Markdown-Ausgabe?

Ja, unter dem HTML-Code steht die Tabelle als Markdown für README-Dateien und Wikis.

Werden meine Daten hochgeladen?

Nein, alles läuft lokal im Browser.

Alle Tools an einem Ort

Über 100 Rechner für Alltag, Mathematik, Finanzen und mehr – kostenlos, ohne Anmeldung und mit sichtbarem Rechenweg.

Alle Tools ansehen Alle Kategorien