HTML-Tabellen-Generator
Ein HTML-Tabellen-Generator verwandelt ein tabellenkalkulationsähnliches Raster in fertiges Markup: Zeilen und Spalten festlegen, Daten eintippen oder importieren, einen Stil wählen und den Code kopieren. Das eingebaute Beispiel füllt hier eine Preistabelle mit 6 × 4 Zellen und erzeugt 43 Zeilen HTML mit Inline-Styles — oder dasselbe Raster als 7 Zeilen Markdown.
Schnellauswahl
Tabelle bearbeiten
Daten importieren
Live-Vorschau
Generierter Code
Unterstützt dieses kostenlose Tool mit einem kleinen HTML-Kommentar
Beliebte Werkzeuge
Über HTML-Tabellen-Generator
Dieser HTML-Tabellen-Generator baut das Markup aus einem Raster, das Sie direkt auf der Seite bearbeiten. Die Minus- und Plus-Schaltflächen neben Zeilen und Spalten ändern die Größe, jede Zelle ist ein einfaches Textfeld, und das rote Kreuz am Zeilenanfang löscht die Zeile. Liegen die Daten schon anderswo vor, fügen Sie sie in das Feld Daten importieren ein und klicken auf CSV importieren, TSV importieren oder Pipe importieren: Das Raster wird aus dem eingefügten Text neu aufgebaut, und Zeilen mit weniger Feldern werden aufgefüllt, damit alle gleich breit sind.
Sechs Kontrollkästchen bestimmen das Aussehen. Kopfzeile macht aus der ersten Zeile th-Zellen in einem thead, Gestreifte Zeilen färbt jede zweite Zeile, Umrandet zeichnet ein vollständiges Gitter statt nur unterer Linien, Hover-Effekt ergänzt einen Hintergrund beim Überfahren, Responsiv legt die Tabelle in einen horizontal scrollbaren Container, und Kompakt verringert den Zellabstand von 10px 16px auf 4px 8px. Kopf-Hintergrund, Kopftext und Randfarbe sind Farbwähler, und die Leiste Schnellauswahl (Simple, Striped, Dark, Colorful, Minimal, Compact, Pricing) setzt alles auf einmal.
Der Bereich Generierter Code bietet sechs Ausgaben. HTML schreibt jede Regel als Inline-Style-Attribut, die Form, die die meisten E-Mail-Programme behalten. HTML + CSS verlagert die Regeln in einen style-Block auf der Klasse .fwt-table. Bootstrap liefert die Klassen table, table-striped, table-bordered, table-hover und table-sm, Tailwind liefert Utility-Klassen und einen overflow-x-auto-Container — beide setzen das Stylesheet des Frameworks auf Ihrer Seite voraus. Markdown füllt die Spalten mit Leerzeichen auf, und CSV setzt ein Feld nur dann in Anführungszeichen, wenn es ein Komma, ein Anführungszeichen oder einen Zeilenumbruch enthält.
Was das Werkzeug nicht kann: Zellen lassen sich nicht verbinden, also wird kein colspan- oder rowspan-Attribut geschrieben, und die Kopfzellen tragen kein scope-Attribut, mit dem Screenreader eine Überschrift ihrer Spalte zuordnen. Sortierung, Seitenwechsel und Beschriftungen werden ebenfalls nicht erzeugt. Das Raster entsteht in Ihrem Browser und wird nie hochgeladen.
Anwendungsfälle
Anleitung
Legen Sie die Tabellengröße mit den Minus- und Plus-Schaltflächen neben Zeilen und Spalten fest und tippen Sie Ihre Inhalte anschließend direkt in die Zellen unter Tabelle bearbeiten.
Alternativ fügen Sie CSV-, TSV- oder pipe-getrennte Daten in das Feld Daten importieren ein und klicken auf CSV importieren oder TSV importieren, um die Tabelle auf einen Schlag zu füllen; Beispiel laden fügt Demodaten ein.
Setzen Sie Häkchen bei der gewünschten Gestaltung: Kopfzeile, Gestreifte Zeilen, Rahmen, Hover-Effekt, Responsiv und Kompakt.
Legen Sie Kopfzeilen-Hintergrund, Kopfzeilen-Text und Rahmenfarbe mit den Farbwählern fest oder klicken Sie unter Schnellvorlagen auf eine Schaltfläche wie Striped, Dark, Minimal oder Pricing.
Prüfen Sie das Ergebnis unter Live-Vorschau und passen Sie den Aufbau mit dem roten Kreuz neben einer Zeile oder mit den Schaltflächen + Zeile hinzufügen und + Spalte hinzufügen an.
Wählen Sie als Ausgabeformat HTML, HTML + CSS, Bootstrap, Tailwind, Markdown oder CSV und klicken Sie auf Kopieren, um den Code in die Zwischenablage zu legen.
Profi-Tipps
- Beispiel laden ersetzt das gesamte Raster, statt etwas hinzuzufügen — kopieren Sie bereits Eingetipptes vorher aus dem Bereich Generierter Code heraus.
- Excel, Google Tabellen und Numbers legen tabulatorgetrennten Text in die Zwischenablage: Fügen Sie einen kopierten Bereich in Daten importieren ein und drücken Sie TSV importieren, nicht CSV importieren, sonst landet jede Zeile in einer einzigen Zelle.
- CSV importieren behandelt das doppelte Anführungszeichen als Umschalter und entfernt es, sodass „1,234“ in Anführungszeichen als eine Zelle mit 1,234 ankommt. TSV importieren behandelt Anführungszeichen gar nicht und übernimmt jedes Zeichen unverändert.
- Hover-Effekt wird nur in den Ausgaben HTML + CSS, Bootstrap und Tailwind zu einer echten Regel. Die einfache HTML-Ausgabe schreibt die Streifen als Inline-Hintergrund auf jede zweite Zeile und ignoriert Hover vollständig.
- Wird Quellenangabe-Kommentar im Code einfügen abgehakt, verschwindet der HTML-Kommentar, doch die Ausgabe HTML + CSS behält eine /*! ... */-Zeile im Stylesheet — löschen Sie diese eine Zeile von Hand, wenn das CSS sauber bleiben muss.
Fehlerbehebung
Ein Klick auf CSV importieren bewirkt nichts und das Raster bleibt leer.
Der Import bricht kommentarlos ab, wenn das Feld Daten importieren leer ist oder nur Leerzeichen enthält. Fügen Sie zuerst die Zeilen ein und drücken Sie dann die Schaltfläche zu Ihrem Trennzeichen: CSV importieren für Kommas, TSV importieren für Tabulatoren, Pipe importieren für das Zeichen |.
Die Schaltfläche Kopieren wechselt nie zu Kopiert!
Das Kopieren nutzt die Zwischenablage-API des Browsers, die eine sichere Seite und einen echten Klick verlangt; manche Browser oder Erweiterungen blockieren sie. Passiert nichts, markieren Sie den Code im Bereich Generierter Code und drücken Strg+C, auf dem Mac Cmd+C.
Die Bootstrap- oder Tailwind-Ausgabe sieht auf meiner Seite völlig ungestylt aus.
Diese beiden Formate schreiben nur Klassennamen — table-striped, table-bordered, overflow-x-auto und so weiter — und setzen voraus, dass das Stylesheet des Frameworks bereits geladen ist. Bindet Ihre Seite weder Bootstrap noch Tailwind ein, nehmen Sie HTML oder HTML + CSS, die die Regeln mitbringen.
Hover-Effekt ist angehakt, aber beim einfachen HTML-Code passiert nichts.
Das einfache HTML-Format hat keinen Platz für eine :hover-Regel, weil es Stile als Inline-Attribute schreibt; das Kästchen wird dort ignoriert. Wechseln Sie zu HTML + CSS, das eine Regel .fwt-table tbody tr:hover ergänzt, oder zu Bootstrap beziehungsweise Tailwind, die eine Hover-Klasse setzen.
Die Minus-Schaltfläche neben Zeilen oder Spalten reagiert nicht mehr.
Das Raster geht nicht unter eine Zeile und eine Spalte, deshalb tun diese Schaltflächen am Minimum nichts mehr. Um die Zellen zu leeren, ohne das Raster zu verkleinern, klicken Sie auf Alles Löschen; um eine bestimmte Zeile zu entfernen, nutzen Sie das rote Kreuz an ihrem Anfang.
Häufig gestellte Fragen
Eine HTML-Tabelle ist ein Datenraster, das mit dem Element table geschrieben wird. Zeilen sind tr-Elemente, Kopfzellen sind th, Datenzellen sind td, und thead und tbody fassen Kopfzeile und Rumpf zusammen. Dieser Generator schreibt genau diese Struktur, und thead und th erscheinen nur, solange das Kästchen Kopfzeile angehakt ist.
th kennzeichnet eine Kopfzelle, td eine Datenzelle. Browser stellen th standardmäßig fett und zentriert dar, und Hilfstechnik kündigt sie als Beschriftung der darunterliegenden Zellen an. Hier wird die erste Zeile zu th-Zellen in einem thead, wenn Kopfzeile angehakt ist; ohne Haken werden alle Zellen einschließlich Zeile eins als td geschrieben.
Nein. Das Raster bleibt immer rechteckig, jede Zeile erhält gleich viele Zellen, und es wird kein colspan- oder rowspan-Attribut geschrieben. Wenn Sie verbundene Zellen brauchen, bauen Sie die Tabelle hier, kopieren das HTML und ergänzen im Editor colspan="2" oder rowspan="2" an der Zelle, wobei Sie die nun überdeckten Zellen löschen.
Stellen Sie das Ausgabeformat von HTML auf HTML + CSS um. Diese Fassung druckt einen style-Block mit den Regeln .fwt-table, .fwt-table th und .fwt-table td, dazu eine nth-child(even)-Regel für die Streifen und eine tbody tr:hover-Regel, wenn die Kästchen gesetzt sind, gefolgt von sauberem Markup ganz ohne style-Attribute, nur mit class="fwt-table".
Zwei Einstellungen greifen hier. Ohne Haken bei Umrandet erhalten die Zellen nur ein border-bottom, Sie sehen also waagerechte Linien und keine senkrechten. Mit Haken werden die Linien in der Farbe des Wählers Randfarbe gezeichnet, und der Standardwert #e5e7eb ist ein sehr helles Grau, das auf weißem Grund fast verschwindet. Wählen Sie einen dunkleren Ton, dann wird das Gitter sichtbar.
Haken Sie Responsiv an und wählen Sie die Ausgabe Bootstrap oder Tailwind. Bootstrap legt die Tabelle in ein div mit der Klasse table-responsive, Tailwind in ein div mit overflow-x-auto, sodass eine breite Tabelle seitlich scrollt, statt das Layout zu sprengen. Auf HTML, HTML + CSS, Markdown und CSV hat das Kästchen keine Wirkung.
Ja. Markieren Sie den Bereich in Excel, Google Tabellen oder Numbers und kopieren Sie ihn: Tabellenkalkulationen legen tabulatorgetrennten Text in die Zwischenablage. Fügen Sie diesen in das Feld Daten importieren ein und drücken Sie TSV importieren. Das Raster wird neu aufgebaut, die Zähler Zeilen und Spalten passen sich an, und zu kurze Zeilen werden mit leeren Zellen aufgefüllt.
Nehmen Sie in allen drei Fällen die einfache HTML-Ausgabe. Sie trägt jede Farbe, Rahmenlinie und Polsterung als style-Attribut direkt am Element und übersteht damit Editoren und Mailprogramme, die einen style-Block entfernen. In WordPress fügen Sie sie in einen Block Individuelles HTML ein, in Blogger wechseln Sie in die HTML-Ansicht statt in Verfassen.
Ja, beides sind Ausgabeformate. Markdown füllt jede Spalte mit Leerzeichen auf, damit der Quelltext ausgerichtet bleibt, und setzt die Trennzeile unter die Kopfzeile, wodurch aus dem sechszeiligen Beispiel sieben Zeilen werden. CSV schreibt eine Zeile je Datensatz und setzt ein Feld nur bei Komma, Anführungszeichen oder Zeilenumbruch in Anführungszeichen, wobei innere Anführungszeichen verdoppelt werden.
Ja, für tabellarische Daten: Preisraster, Merkmalslisten, Zeitpläne, Ergebnisse. Überholt ist nur der Einsatz von Tabellen für das Seitenlayout, eine Technik der 1990er, die CSS Grid und Flexbox abgelöst haben. Alles, was dieser Generator schreibt, ist eine Datentabelle mit Kopfzeile, Rumpfzeilen und Zellen — genau das, was Suchmaschinen und Screenreader erwarten.