Dropping a data table into a page or email
The markup is semantic and unstyled, so it picks up the surrounding design rather than clashing with it.
JSON to HTML Table
Turn a JSON array into a clean HTML table in your browser, with markup in the data escaped safely.
Maintained by Roshan.
Use JSON to HTML Table
Converts JSON array of objects into HTML table in this tab. Configuration files routinely hold hostnames, keys and credentials, so nothing here is sent anywhere.
Values are never retyped as numbers or booleansGuessing types is how a converter turns a postcode of 0123 into 123, or a literal string of false into a boolean. Values are carried across as they were written, and casting is left to you where it matters.
Explore developer and data tools
Find related browser-local tools for nearby tasks without starting another search.
Browse all developer and data toolsAbout JSON to HTML Table
Turning data into an HTML table is the sort of thing that gets done with a quick loop and string concatenation, and that quick loop is where cross-site scripting bugs come from. If any value in the data contains a less-than sign, concatenating it into markup means the browser reads it as a tag. Most of the time this shows up as a page that renders oddly; occasionally it shows up as a script running that nobody intended. The escaping here is not optional or a setting, because a table generator that produces unsafe markup by default is worse than useless. The output itself is deliberately plain: a semantic table with a proper header section and no styling, so it inherits whatever design surrounds it.
Work through the input
- The union of keys across every object becomes the header row, so a record missing a field does not remove that column from the table.
- Each object becomes one row, with cells in the same column order throughout.
- Every value is escaped for HTML before being written. Angle brackets, ampersands and quotes are converted to entities, so data containing markup displays as text rather than being interpreted.
- The structure uses thead and tbody, which is what screen readers and sorting scripts expect and what makes a table semantic rather than merely visual.
- No classes, inline styles or attributes are added, so the table takes on the styling of whatever page it is pasted into.
When json to html table is useful
Previewing an API response as a table
Far easier to scan than raw JSON when you are checking whether the right records came back.
Check the output
- The table is unstyled by design. Add your own CSS; a generator that imposed styling would fight every design system it was pasted into.
- Nested objects and arrays are written as JSON text in the cell, since a table cell is a flat space.
- There is no sorting, filtering or pagination. This produces static markup rather than a component.
- Very wide data produces a table that overflows on a phone. Wrap it in a scrolling container if that matters.
- Column order follows the order keys first appear in the data, which may not be the order you want to present.
Questions about JSON to HTML Table
Is the output safe to paste into a page?
Yes. Every value is HTML-escaped, so data containing markup renders as visible text instead of being interpreted as tags.
Why is there no styling?
Because a styled table fights whatever design it lands in. The markup is semantic and inherits your CSS.
What happens to nested data?
It becomes JSON text inside the cell. A table cell has no way to show structure.
Can I sort or filter it?
Not from here. This produces static markup; sorting needs a script or a component.
Is my data transmitted?
No. The markup is generated in this tab.
Related tools
JSON to Markdown Table
Turn a JSON array into a Markdown table in your browser, with pipes escaped so columns stay intact.
JSON to CSV Converter
Convert JSON objects to UTF-8 CSV in your browser. Union columns, quote values, and protect formula-like strings.
JSON to SQL
Turn a JSON array into SQL INSERT statements in your browser, with quotes escaped correctly.