CSV-zu-HTML-Tabellen-Konverter

Wandelt CSV-Dateien in ein HTML-Snippet mit `

`/`` eingebettet werden. Das Ergebnis wird live in der Vorschau angezeigt und kann kopiert oder heruntergeladen werden. Die Umwandlung erfolgt vollständig im Browser; es werden keine Daten an einen Server gesendet.


`-Auszeichnung um. Wählen Sie das Trennzeichen, ob die erste Zeile als Kopfzeile verwendet wird und ob die Zeilen in `
Trennzeichen
Erste Zeile als Kopfzeile verwenden
In thead/tbody einbetten

Vorschau

HTML-Code


            
            Kopiert!
            
          

Geben Sie CSV-Daten ein, um hier die erzeugte HTML-Tabelle zu sehen.

Wie eine CSV-Zeile einer HTML-Tabelle entspricht

Eine CSV-Zeile name,age,city
Resultierende HTML-Auszeichnung <tr><td>name</td><td>age</td><td>city</td></tr>

Wird die erste Zeile als Kopfzeile verwendet, wird sie zu einer Zeile aus ``-Tags; jede weitere Zeile wird zu einer Zeile aus ``-Tags.

Tipps

  • Beim Einfügen in eine HTML-E-Mail oder ein älteres CMS ohne Markdown-Unterstützung ist die minimale Ausgabe ohne thead/tbody oft einfacher zu handhaben.
  • Jedes `<`, `>` oder `&` in einer Zelle wird automatisch in HTML-Entitäten umgewandelt, sodass das Einfügen des erzeugten Codes das Layout nicht zerstört.
  • Die Vorschau rendert die konvertierte Tabelle genauso, wie es ein Browser tun würde, sodass Sie das Aussehen prüfen können, bevor Sie den Code irgendwo kopieren.
  • Kombinieren Sie dies mit den Schwesterwerkzeugen CSV zu Markdown und CSV zu JSON, um eine einzige CSV-Datei in das jeweils benötigte Format umzuwandeln.

Häufig gestellte Fragen

Dies wird nach Möglichkeit empfohlen, da es erlaubt, die Kopfzeile semantisch vom Inhalt zu unterscheiden. In Umgebungen, in denen thead/tbody unzuverlässig behandelt wird, etwa bei manchen E-Mail-Programmen, wird die minimale Auszeichnung ohne diese Tags meist konsistenter dargestellt.

Ja. Kommas und Zeilenumbrüche innerhalb von in Anführungszeichen gesetzten Zellen werden korrekt erkannt, sodass selbst komplexe, aus Excel kopierte CSV-Daten ohne Beschädigung der Tabellenstruktur in HTML umgewandelt werden.

Ja. Die Ausgabe ist Standard-``-Auszeichnung und kann direkt in den HTML-Bearbeitungsmodus von WordPress oder in den Text einer HTML-E-Mail eingefügt werden.

Nein. Die gesamte Umwandlung erfolgt in JavaScript, das in Ihrem Browser läuft, und die eingegebenen CSV-Inhalte werden niemals an einen Server übertragen.
ツールくん

Übrigens – Warum sich das `

`-Tag hartnäckig hält

In den späten 1990er-Jahren, in der Frühzeit des Webs, war das „Tabellenlayout" – der Aufbau einer gesamten Seite mit `

`-Tags – die Norm. CSS bot damals kaum Layoutmöglichkeiten, und Tabellen waren praktisch das einzige praktikable Mittel, um Inhalte in mehreren Spalten anzuordnen, sodass HTML-Quellcode jener Zeit voller `
`-Elemente war, die nichts mit tabellarischen Daten zu tun hatten.

Heute, da CSS ausgereift ist und Flexbox sowie Grid weit verbreitet sind, gilt die Verwendung von Tabellen für Layoutzwecke als bekanntes Antipattern. Für ihren eigentlichen Zweck – die Darstellung echter, in Zeilen und Spalten organisierter Daten – bleibt `

` jedoch die geeignetste und zugänglichste Wahl, da Screenreader die Beziehung zwischen `
`- und ``-Zellen vorlesen können.

Der Bedarf, CSV-Inhalte in einen Blogbeitrag oder einen E-Mail-Newsletter einzufügen, besteht bis heute, da HTML-E-Mails kein Markdown rendern können und manchen CMS ein Markdown-Plugin fehlt. Ein Werkzeug, das Tabellenkalkulationsergebnisse per Klick in eine HTML-Tabelle umwandelt, bedient dieses schlichte, aber beständige praktische Bedürfnis.