JSON in HTML-Tabelle umwandeln
JSON in HTML-Tabelle umwandeln: Arrays von Objekten werden zu sauberem HTML mit thead und tbody, alle Werte sicher maskiert, mit Live-Vorschau und Download.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
JSON zu HTML: Tabelle mit thead und tbody
Mit diesem Werkzeug wandeln Sie JSON in eine HTML-Tabelle um. Ein Array von Objekten wird zur klassischen Tabelle: Die Schlüssel bilden die Spalten im thead, jedes Objekt eine Zeile im tbody. Ein einzelnes Objekt erscheint als zweispaltige Tabelle mit Schlüssel und Wert, eine Liste von Listen Zeile für Zeile. Die Vorschau zeigt sofort, wie das JSON als Tabelle aussieht, und den fertigen Code kopieren Sie in Ihre Seite, ein CMS oder eine E-Mail.
Verschachtelte Objekte lassen sich auf drei Arten darstellen: flach als eigene Spalten mit Punkt im Namen wie herkunft.land, als JSON-Text in einer Zelle oder als verschachtelte Tabelle in der Zelle. Listen einfacher Werte werden mit Komma verbunden. Alle Inhalte werden HTML-maskiert, ein Wert wie <script> erscheint also als Text und wird nie ausgeführt. Das ist wichtig, wenn die Daten aus fremden Quellen stammen.
Der Code ist bewusst schlicht gehalten: Spaltenköpfe mit scope="col" für Screenreader, optional eine caption und eine CSS-Klasse, aber keine festen Breiten oder Farben, damit Sie die HTML-Tabelle erzeugen und mit Ihrem eigenen Stylesheet gestalten können. Die heruntergeladene Datei enthält ein paar Grundregeln für Rahmen. Für Markdown statt HTML eignet sich Tabelle umwandeln, für CSV-Dateien JSON in CSV.
Anleitung: JSON in HTML-Tabelle in 4 Schritten
- JSON einfügen, am besten ein Array von Objekten, oder „Beispiel“ laden.
- Wählen, wie verschachtelte Objekte erscheinen: flach als Spalten, als JSON-Text oder als verschachtelte Tabelle.
- Optional CSS-Klasse und Tabellenüberschrift (caption) eintragen sowie Kopfzeile mit thead und rechtsbündige Zahlen einstellen.
- Die Vorschau prüfen und den HTML-Code kopieren oder als HTML-Datei herunterladen.
Typische Anwendungsfälle
- API-Antworten lesbar machen: Eine JSON-Liste aus einer Schnittstelle als Tabelle ansehen, ohne Code zu schreiben.
- Inhalte für CMS und Blog: Preislisten oder technische Daten aus JSON als fertige HTML-Tabelle in eine Seite einsetzen.
- Berichte per E-Mail: Auswertungen als schlichte HTML-Tabelle in eine Mail oder einen internen Bericht übernehmen.
- KI-Ausgaben darstellen: Strukturierte JSON-Antworten eines Sprachmodells sicher maskiert als Tabelle anzeigen.
Häufige Fragen
Welches JSON lässt sich als Tabelle darstellen?
Am besten ein Array von Objekten mit ähnlichen Schlüsseln. Fehlt ein Schlüssel in einer Zeile, bleibt die Zelle leer. Ein einzelnes Objekt wird als Schlüssel-Wert-Tabelle ausgegeben, ein Array von Arrays Zeile für Zeile.
Ist der erzeugte HTML-Code sicher?
Ja. Alle Schlüssel und Werte werden maskiert: <, >, & und Anführungszeichen werden zu HTML-Entities. Eingebettetes HTML oder Skripte aus den Daten erscheinen nur als Text.
Wie werden verschachtelte Objekte dargestellt?
Wahlweise flach als eigene Spalten mit Punkt im Namen, als JSON-Text in der Zelle oder als kleine Tabelle in der Zelle. Listen einfacher Werte werden mit Komma verbunden.
Wie gestalte ich die Tabelle?
Über die CSS-Klasse, die Sie angeben, etwa .tabelle { border-collapse: collapse } und Regeln für th und td. Mit „Zahlen rechtsbündig“ erhalten Zahlenzellen eine rechtsbündige Ausrichtung, damit Spalten mit Beträgen besser lesbar sind.
Werden die Daten hochgeladen?
Nein. Tabelle und Vorschau entstehen in Ihrem Browser.
Wie füge ich die HTML-Tabelle in WordPress ein?
Im Block-Editor einen Block „Individuelles HTML“ einfügen und den kopierten Code hineinsetzen. Gestalten lässt sich die Tabelle über die angegebene CSS-Klasse im Theme oder im Bereich für zusätzliches CSS.
Wie mache ich eine breite HTML-Tabelle auf dem Handy scrollbar?
Setzen Sie die Tabelle in einen Container mit overflow-x: auto, etwa <div style="overflow-x:auto">. Breite Tabellen lassen sich dann seitlich wischen, ohne das Layout der Seite zu sprengen.
Das könnte auch helfen
JSON minimieren
JSON auf eine Zeile verdichten: Leerraum entfernen, Zahlen exakt erhalten, optional Schlüssel sortieren.
ÖffnenJSON in CSV umwandeln
JSON-Arrays in CSV für Excel umwandeln: verschachtelte Felder als Spalten, Semikolon oder Komma.
ÖffnenCSV in JSON umwandeln
CSV in JSON umwandeln mit automatischer Trennzeichen-Erkennung und Anführungszeichen nach RFC 4180.
ÖffnenXML formatieren und prüfen
XML einrücken, minimieren und auf Wohlgeformtheit prüfen, mit Fehlerstelle in Zeile und Spalte.
ÖffnenXML in JSON umwandeln
XML in JSON umwandeln: Attribute mit Präfix, wiederholte Elemente als Arrays, Zahlen erkannt.
ÖffnenYAML in JSON umwandeln
YAML prüfen und in JSON umwandeln: Listen, Anker, Block-Strings und mehrere Dokumente.
Öffnen