CSV-zu-HTML-Tabellen-Konverter

CSV-zu-HTML-Tabellen-Konverter: Zeilen einfügen, Code erhalten | We.Inc

Kostenloser CSV-zu-HTML-Tabellen-Konverter. Füge komma-, semikolon- oder tabgetrennte Daten oder aus einer Tabellenkalkulation kopierte Zellen ein und erhalte eine saubere, barrierefreie HTML-Tabelle.

CSV-zu-HTML-Tabellen-Konverter

Füge Zeilen aus einer CSV-Datei oder direkt aus einer Tabellenkalkulation ein und erhalte aufgeräumten HTML-Tabellencode mit Kopfzeile, maskiertem Text und scope-Attributen für Screenreader. Damit bringst du eine Preisliste, Öffnungszeiten, eine Größentabelle oder einen Vergleich auf eine Website, ohne jede Zelle von Hand zu tippen.

  • Füge deine Daten ein. Aus Excel oder Google Sheets kopierte Zellen kommen tabgetrennt an, wähle also Tabulator; eine gespeicherte .csv-Datei nutzt meist Kommas.
  • Lass 'Erste Zeile ist die Kopfzeile' angehakt, wenn die erste Zeile die Spaltennamen enthält. Sie werden zu th-Zellen in thead.
  • Füge einen Klassennamen hinzu, wenn deine Website Tabellen über eine Klasse gestaltet, etwa 'price-table'.
  • Kopiere das HTML in deine Seite oder lade es herunter. Zeilen, die kürzer als die längste sind, werden mit leeren Zellen aufgefüllt, damit die Spalten passen.
  • Werte, die das Trennzeichen enthalten, etwa 'Bread, rye' in einer Komma-Datei, müssen in der CSV in doppelten Anführungszeichen stehen. Exporte aus Tabellenkalkulationen machen das automatisch.
  • Nutze Tabellen nur für Daten, die wirklich Zeilen und Spalten haben. Eine Tabelle als Seitenlayout ist auf Smartphones und mit Screenreadern schwer zu lesen.
  • Setze einen kurzen Satz oder eine Beschriftung über die Tabelle, die sagt, was sie zeigt. Das hilft Besuchern und Suchmaschinen, die Zahlen zu verstehen.
  • Breite Tabellen laufen auf Smartphones über. Pack die Tabelle in ein div mit overflow-x: auto, damit sie seitlich scrollt, statt die Seite zu sprengen.

Häufige Fragen

Wie wandle ich CSV in eine HTML-Tabelle um?

Füge die CSV ein, wähle das Trennzeichen und kopiere den Code. Jede Zeile wird zu einer tr-Zeile und jeder Wert zu einer td-Zelle; mit der Kopfzeilen-Option wird die erste Zeile zu th-Zellen mit scope="col". Aus 'Item,Price' und danach 'Soup,$5' entsteht zum Beispiel eine Tabelle mit den Überschriften Item und Price und einer Zeile: Soup, $5.

Kann ich direkt aus Excel oder Google Sheets einfügen?

Ja. Beim Kopieren landen die Zellen tabgetrennt in der Zwischenablage. Wähle Tabulator als Trennzeichen und füge ein.

Was ist mit Kommas und Anführungszeichen in Werten?

Der Konverter folgt den üblichen CSV-Regeln: Ein Wert in doppelten Anführungszeichen darf das Trennzeichen und Zeilenumbrüche enthalten, und ein doppeltes Anführungszeichen darin wird als zwei doppelte Anführungszeichen geschrieben. Aus "Say ""hi""" wird Say "hi".

Wird der Text maskiert?

Ja. Zeichen wie <, > und & werden in HTML-Entities umgewandelt, sodass eine Zelle mit '<5 kg' als Text erscheint, statt die Seite zu zerstören.

Werden meine Daten hochgeladen?

Nein. Die Tabelle entsteht in deinem Browser, und nichts, was du einfügst, wird irgendwohin gesendet.

Warum Kopfzellen und scope wichtig sind

  • Ein Screenreader liest eine Tabellenzelle zusammen mit ihrer Spaltenüberschrift vor, sodass man 'Price, $5' hört statt nur '$5'. Das funktioniert nur, wenn Überschriften als th-Zellen ausgezeichnet sind. Das Attribut scope="col" räumt jeden Zweifel aus, ob eine Überschrift zu einer Spalte oder einer Zeile gehört, was vor allem bei Tabellen mit mehreren Kopfzellen zählt.
  • Die Kopfzeile in thead und den Rest in tbody zu setzen hilft auch beim Drucken: Viele Browser wiederholen die thead-Zeile oben auf jeder gedruckten Seite, wenn eine lange Tabelle über mehrere Seiten läuft.

Das richtige Trennzeichen wählen

  • CSV heißt kommagetrennt, doch das Trennzeichen variiert. Tabellenkalkulationen in Ländern, die Dezimalzahlen mit Komma schreiben, etwa Deutschland oder Brasilien, exportieren meist mit Semikolons, damit 2,50 ein einzelner Wert bleibt. Kopieren aus einer Tabellenkalkulation erzeugt Tabs. Steht im Ergebnis alles in einer Spalte, passt das Trennzeichen nicht zu deinen Daten.
  • Ist eine Tabelle in manchen Zeilen um eine Spalte verschoben, such nach einem Trennzeichen ohne Anführungszeichen innerhalb eines Werts, etwa einer Adresse mit Komma. Setze diesen Wert in der Quelle in doppelte Anführungszeichen oder exportiere die Datei neu und wandle erneut um.

CSV-Daten

Item,Price,Size Sourdough loaf,$8,900 g "Croissant, butter",$3.50,1 piece Coffee,$4,12 oz

Trennzeichen

Komma ,

Semikolon ;

Tabulator (aus einer Tabellenkalkulation eingefügt)

Erste Zeile ist die Kopfzeile

Tabellenklasse (optional)

Füge ein paar Datenzeilen zum Umwandeln ein.

HTML-Tabelle

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Kostenlose Tools

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap