TextArray
100% lokal

CSV in HTML-Tabelle

Mach aus CSV-Daten sauberen HTML-Tabellencode mit thead, tbody und maskierten Zellen.

Eingabe
Ausgabe
Verwandte Tools
CSV ⇄ JSON KonverterEntwickler-ToolsCSV-Trennzeichen ändernEntwickler-ToolsListe in CSV umwandelnListenMarkdown zu HTML und zurückEntwickler-Tools
CSV in HTML-Tabelle
Füge CSV-Daten ein und du bekommst eine saubere HTML-Tabelle zurück — ein thead aus der Kopfzeile, ein tbody mit einem tr pro Datensatz und ordentliche Einrückung mit zwei Leerzeichen, die direkt in ein Template passt. Typische Fälle: einen Tabellenexport auf einer Webseite veröffentlichen, eine Tabelle in CMS-Inhalte einbauen, wo der visuelle Editor eingefügte Zellen zerlegt, eine HTML-E-Mail bauen, in der Tabellen noch immer das einzige Layout sind, das überall funktioniert, oder Referenzdaten in eine Dokumentation übernehmen.
Lass das Trennzeichen auf automatischer Erkennung: Das Tool sieht sich eine Probe deiner Daten an und wählt das Zeichen, das die gleichmäßigsten Zeilen ergibt — Komma, Semikolon, Tabulator und senkrechter Strich funktionieren so ohne Einstellung. Felder in Anführungszeichen folgen RFC 4180: Ein Feld darf das Trennzeichen, verdoppelte Anführungszeichen "" und sogar Zeilenumbrüche enthalten; Umbrüche werden als br-Tag geschrieben, damit jeder Datensatz eine einzige Tabellenzeile bleibt. Zeilen mit fehlenden Zellen werden auf die breiteste Zeile aufgefüllt, die Tabelle franst also nie aus.
Jede Zelle wird maskiert — kaufmännisches Und, spitze Klammern und Anführungszeichen werden zu Entities —, sodass ein verirrtes < in den Daten weder die Seite zerbricht noch eigenes Markup einschleust. „Erste Zeile enthält Spaltennamen" macht aus dem ersten Datensatz th-Zellen; ohne die Option werden alle Zeilen einfache td-Zeilen. Der Stil mit einfachen Rahmen stellt der Tabelle einen kleinen style-Block mit feinen Linien voran und legt sie in einen Container, der auf schmalen Bildschirmen horizontal scrollt; „Nur Markup" überlässt das Aussehen deinem eigenen CSS.
Alles läuft in deinem Browser und die Daten verlassen dein Gerät nie — auch ein Export mit Kundendaten ist damit sicher. Kopiere das Markup, lade es als .txt-Datei herunter oder füge es direkt in deine Seite ein.
Häufige Fragen
Welche Trennzeichen liest das Tool?
Komma, Semikolon, Tabulator und senkrechten Strich, standardmäßig mit automatischer Erkennung: Das Tool prüft eine Probe der Daten und wählt das Zeichen, das die gleichmäßigsten Zeilen ergibt. Liegt die Erkennung daneben, wählst du das Trennzeichen selbst.
Wird der Zelleninhalt maskiert?
Ja. Kaufmännisches Und, spitze Klammern und Anführungszeichen werden zu HTML-Entities, damit Daten nie eigenes Markup in deine Seite einschleusen. Ein Zeilenumbruch in einem Feld in Anführungszeichen wird zum br-Tag, damit der Datensatz eine Tabellenzeile bleibt.
Was fügt der Stil mit einfachen Rahmen hinzu?
Einen kleinen style-Block mit feinen Linien über border-collapse und Zellabständen, dazu einen Wrapper-div, der auf schmalen Bildschirmen horizontal scrollt. Alle Klassennamen tragen das Präfix ta-table und kollidieren daher nicht mit deinem CSS. „Nur Markup" lässt all das weg.
Was passiert mit Zeilen, in denen Zellen fehlen?
Kürzere Datensätze werden mit leeren td-Zellen auf die Breite der längsten Zeile aufgefüllt, die erzeugte Tabelle ist also immer rechteckig.
Werden meine Daten irgendwo hochgeladen?
Nein. Die Umwandlung läuft vollständig in deinem Browser und dein CSV verlässt dein Gerät nie.