CSV in HTML-Tabelle umwandeln

So funktioniert es

Markieren Sie die Tabelle in Excel und kopieren Sie sie mit Strg+C, oder öffnen Sie eine .csv-Datei mit dem Editor (Windows) oder TextEdit (Mac) und kopieren Sie den Inhalt. Fügen Sie alles links ein; rechts entsteht sofort der HTML-Code. Aus Excel kopierte Zellen sind durch Tabulatoren getrennt, eine vom deutschen Excel gespeicherte CSV durch Semikolons; das Werkzeug erkennt das Trennzeichen an den ersten Zeilen und nennt es in der Ergebniszeile. Die Beispielliste mit vier Zeilen wird zu einem <thead> mit drei Kopfzellen und einem <tbody> mit drei Datenzeilen. "Teller; Steingut" steht in Anführungszeichen und bleibt deshalb eine Zelle. Zellwerte werden unverändert übernommen: Der Preis 12,90 bleibt 12,90, die Postleitzahl 01067 behält ihre führende Null. Steht in einer Zelle <, > oder &, wird daraus &lt;, &gt; oder &amp;; so wird "<b>" in einer Zelle nicht zu Fettschrift, und eingefügter Code wird nicht ausgeführt. Kürzere Zeilen werden mit leeren Zellen aufgefüllt. Den Code fügen Sie in WordPress in einen Block "Individuelles HTML" ein, in Blogger in die HTML-Ansicht, in einem Newsletter-Programm in das Quellcode-Feld. Für E-Mails wählen Sie "Mit Rahmen und Streifen": Der Stil steht dann in jeder Zelle, weil E-Mail-Programme separate Stylesheets meist nicht lesen.

Dieses Werkzeug ist auch als csv in html umwandeln, csv in html tabelle, excel tabelle in html umwandeln, html tabelle erstellen, csv to html bekannt.

Was ist HTML-Tabelle?

Eine HTML-Tabelle besteht aus einem <table>-Element mit Zeilen (<tr>) und Zellen darin: <th> für Kopfzellen, <td> für Datenzellen. Die Kopfzeile steht üblicherweise in <thead>, die Daten in <tbody>. Diese Gliederung ist nicht nur Optik: Screenreader lesen zu jedem Wert die passende Überschrift vor, und Suchmaschinen erkennen die Struktur. Wie die Tabelle aussieht, bestimmt CSS; ohne Stil zeigt der Browser sie ohne Rahmen und mit wenig Abstand.

Was ist Maskierung (Escaping)?

Maskierung ersetzt Zeichen, die in HTML eine Bedeutung haben, durch benannte Entitäten: < wird &lt;, > wird &gt;, & wird &amp;, das Anführungszeichen &quot;. Der Browser zeigt dann das Zeichen an, statt es als Code zu deuten. Ohne Maskierung kann ein Zellinhalt das Layout zerstören oder, wenn er ein Skript enthält, im Browser der Besucher ausgeführt werden; diese Lücke heißt Cross-Site-Scripting (XSS). Maskiert wird der Inhalt jeder einzelnen Zelle, nicht der fertige Tabellencode.

Was ist der Unterschied zwischen CSV und einer HTML-Tabelle?

CSV ist reiner Datentext: Zeilen, Trennzeichen, keine Formatierung, keine Bedeutung der ersten Zeile außer durch Absprache. Excel und Datenbanken lesen CSV direkt ein. Eine HTML-Tabelle ist Code für die Anzeige im Browser: Jede Zelle steckt in einem Tag, die Kopfzeile ist als <th> ausgezeichnet, und Stil lässt sich zuweisen. Umgekehrt eignet sich HTML schlecht zum Weiterrechnen, weil die Werte zwischen Tags stehen. Für den Datenaustausch nehmen Sie CSV, für die Veröffentlichung auf einer Website oder in einer E-Mail die HTML-Tabelle.

Drei Fallen: fehlende Maskierung, verlorener Stil in E-Mails, verrutschte Spalten

Maskierung: In HTML beginnt < ein Tag und & eine Entität. Steht "Preis < 100 & auf Lager" ungeschützt in einer Zelle, hält der Browser das für ein kaputtes Tag, und ein Teil des Textes verschwindet. Schlimmer: Steht in einer Zelle ein <script>, kann dieser Code im Browser der Besucher laufen. Das Werkzeug maskiert jede Zelle mit der Bibliothek he; was in der Zelle steht, erscheint genau so auf der Seite.

Stil in E-Mails: Gmail und Outlook entfernen einen <style>-Block oder ein externes Stylesheet in HTML-Mails häufig. Stehen Rahmen und Innenabstand nicht als style="…" direkt in jedem <td> und <th>, erscheint die Tabelle ohne Linien und gedrängt. "Mit Rahmen und Streifen" schreibt den Stil in jede Zelle und färbt jede zweite Zeile hell ein.

Verrutschte Spalten: Hat eine Zeile weniger Zellen als die Kopfzeile, zeichnet der Browser die fehlenden Zellen nicht, und Werte können unter der falschen Überschrift landen. Das Werkzeug ergänzt kurze Zeilen mit leeren Zellen und nennt in der Ergebniszeile, wie viele es waren.

• "Preis < 100 & auf Lager" → Preis &lt; 100 &amp; auf Lager
• "Teller; Steingut" in Anführungszeichen → eine Zelle, keine Teilung
• Kurze Zeile → am Ende leere <td></td>

Welche Einstellung wann

Hat Ihre Website oder Ihr Theme eigene Tabellenstile, lassen Sie "Schlichtes HTML" stehen; der Code bleibt sauber, und das Theme zeichnet die Tabelle in seinen Farben. WordPress, Blogger und die meisten fertigen Themes geben Tabellen von selbst Rahmen und Abstände.

Geht die Tabelle in einen Newsletter, ein Angebot per E-Mail oder an eine Stelle ohne Stylesheet, wählen Sie "Mit Rahmen und Streifen". Ist die erste Zeile keine Überschrift, etwa weil Sie nur den Rumpf einer Preisliste übernehmen, wählen Sie "Daten"; dann entsteht kein <thead>. Eine Kopfzeile hilft auch Screenreadern, die Spalten vorzulesen; haben Ihre Daten eine, behalten Sie die Voreinstellung.

Häufige Fragen

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

Markieren Sie den Bereich in Excel, kopieren Sie ihn mit Strg+C und fügen Sie ihn links ein. Die Tabulatoren zwischen den Zellen werden erkannt, rechts steht der fertige <table>-Code mit <thead> und <tbody>. Formeln werden dabei nicht übernommen, nur die angezeigten Werte.

Warum stehen &lt; und &amp; im Code statt < und &?

Das ist die Maskierung. Ein ungeschütztes < würde der Browser als Beginn eines Tags lesen und den Text danach verschlucken oder als Code ausführen. Im Quelltext steht &lt;, auf der fertigen Seite sieht der Besucher wieder ein <. Sie müssen nichts zurückverwandeln.

Warum hat meine Tabelle in der E-Mail keine Rahmen?

Viele E-Mail-Programme entfernen <style>-Blöcke und externe Stylesheets. Wählen Sie die Darstellung "Mit Rahmen und Streifen": Rahmen, Abstand und Streifen stehen dann als style-Attribut in jeder Zelle, und diese Angaben bleiben in Gmail und Outlook erhalten.

Werden meine Tabellendaten an einen Server geschickt?

Nein. Das Zerlegen der CSV und das Schreiben des HTML laufen vollständig in Ihrem Browser; auch eine Kundenliste oder Preisliste verlässt die Seite nicht und wird nirgends gespeichert. Nach dem Laden funktioniert die Umwandlung auch ohne Internetverbindung.