CSV-zu-HTML-Tabellen-Konverter
Wandelt CSV-Dateien in ein HTML-Snippet mit <table><tr><td>-Auszeichnung um. Wählen Sie das Trennzeichen, ob die erste Zeile als Kopfzeile verwendet wird und ob die Zeilen in <thead>/<tbody> 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.
| 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 <th>-Tags; jede weitere Zeile wird zu einer Zeile aus <td>-Tags.
Was die Umwandlung von CSV in eine HTML-Tabelle ist
Eine Tabelle in HTML zu schreiben heißt, für jede Zeile ein <tr> und für jede Zelle ein <td> aufzureihen, was von Hand mühsam ist. Dieses Werkzeug liest eine CSV und wandelt sie in einen HTML-Ausschnitt in <table>-Form um. Das Ergebnis lässt sich sogleich in der Vorschau ansehen, sodass Sie vor dem Kopieren sehen, wie es am Zielort aussehen wird.
Die Zeichen <, > und & in den Zellen werden selbsttätig in HTML-Entitäten verwandelt, sodass Daten mit solchen Zeichen die Darstellung nicht zerreißen. Sie können außerdem wählen, ob die Tabelle in thead und tbody eingefasst wird. Semantisch ist es besser, sie mitzuführen, doch in Umgebungen mit unzuverlässiger Auslegung – HTML-E-Mail darunter – ist die knappe Form ohne sie beständiger.
So bauen Sie eine HTML-Tabelle
- CSV einfügen Fügen Sie die CSV in das Eingabefeld ein. Haben Sie sie aus einer Tabellenkalkulation kopiert, stellen Sie das Trennzeichen auf Tabulator um.
-
Umgang mit der Kopfzeile festlegen
Aktivieren Sie die Option für die Kopfzeile, dann wird die erste Zeile mit
<th>-Tags ausgegeben. - Über thead und tbody entscheiden In der Regel können Sie sie eingeschaltet lassen. Schalten Sie sie für Umgebungen mit unzuverlässiger Darstellung aus, etwa HTML-E-Mail.
- Vorschau prüfen und kopieren Sehen Sie sich die tatsächlich gerenderte Tabelle an, und wenn sie stimmt, kopieren Sie den HTML-Code und fügen ihn ein.
Tipps für die Nutzung
- 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.
Wann die Umwandlung von CSV in HTML nützt
Eine Tabelle in einen Blog oder ein CMS stellen
Auch bei einem CMS ohne Markdown-Unterstützung lässt sich eine Tabelle veröffentlichen, indem Sie in den HTML-Bearbeitungsmodus einfügen.
Eine Tabelle in eine HTML-E-Mail einfügen
E-Mail legt Markdown nicht aus, für eine Tabelle braucht es also HTML. Die knappe Form ohne thead und tbody ist beständiger.
Vor der Umsetzung eine Attrappe bauen
In der Phase des Bildschirmentwurfs machen Sie aus einer den echten Daten nahen Tabelle sogleich HTML. Es taugt auch zum Prüfen, wie Stile greifen.
Daten mit Sonderzeichen sicher veröffentlichen
Werte mit spitzen Klammern oder Ampersand werden selbsttätig maskiert, sodass das Layout am Zielort nicht zerreißt.
Begriffe rund um HTML-Tabellen
- Das table-Element
- Der HTML-Tag, der eine Tabelle darstellt. Für seinen eigentlichen Zweck – echte Daten mit Zeilen und Spalten auszudrücken – ist er bis heute der richtige Tag.
- th und td
<th>ist eine Kopfzelle,<td>eine Datenzelle. Sie zu unterscheiden erlaubt Vorleseprogrammen, die Zuordnung zu vermitteln.- thead und tbody
- Tags, die den Kopf- vom Rumpfteil semantisch trennen. Sie hängen auch mit dem Verhalten zusammen, den Kopf beim Drucken langer Tabellen zu wiederholen.
- HTML-Entität
- Eine Schreibweise, die Sonderzeichen sicher darstellt.
<wird beispielsweise durch<ersetzt. - Tabellenlayout
- Das alte Verfahren, den gesamten Spaltenaufbau einer Seite aus Tabellenmarkup zu errichten. Es gilt heute als ausgesprochenes Anti-Muster.
Häufig gestellte Fragen
<table>-Auszeichnung und kann direkt in den HTML-Bearbeitungsmodus von WordPress oder in den Text einer HTML-E-Mail eingefügt werden.
Übrigens – Warum sich das <table>-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 <table>-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 <table>-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 <table> jedoch die geeignetste und zugänglichste Wahl, da Screenreader die Beziehung zwischen <th>- und <td>-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.