JSON to HTML Table Converter
Turn a JSON array into presentable table markup without writing a template or a loop.
Your data stays on your device
Input — JSON
- characters
- 0
- lines
- 0
- size
- 0 B
Output — HTML
- characters
- 0
- lines
- 0
- size
- 0 B
Options
About this tool
Displaying an API response as a table for a report, an email or a quick internal page usually means writing a loop, deciding on columns and remembering to escape. For a one-off, generating the markup is faster and less error-prone.
Columns come from the union of keys across every object, so records with missing fields still align. Nested objects are flattened into dotted column names and arrays are joined, keeping the table two-dimensional.
How to use this tool
- Paste a JSON array of objects, or an object containing one.
- Choose how nested values should be flattened.
- Optionally set a caption and CSS classes.
- Press Convert and copy the markup.
Key features
- Columns derived from the union of all object keys
- Dotted flattening for nested objects
- Arrays joined into a single readable cell
- Semantic thead and tbody with scoped headers
- All values HTML-escaped
- Optional caption and custom class names
Example
Input — JSON
[{"id":1,"ok":true},{"id":2,"ok":false}]Output — HTML
<table>
<thead>
<tr><th scope="col">id</th><th scope="col">ok</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>true</td></tr>
<tr><td>2</td><td>false</td></tr>
</tbody>
</table>Good to know
- The input must be array-shaped. A single object is rendered as a one-row table.
- null and undefined render as empty cells, which makes them visually indistinguishable from empty strings.
- No styling, sorting or pagination is included — this produces markup, not a component.
Frequently asked questions
What if my objects have different keys?
Every key seen anywhere becomes a column, and records that lack it get an empty cell. Nothing is dropped.
How are nested objects displayed?
Flattened into dotted column names such as user.address.city, so each leaf value gets its own column.
Can I control column order?
Columns follow first-seen order across the array. Reorder the keys in your JSON, or edit the generated markup, to change it.
Is it safe to paste the output into a CMS?
The values are escaped, so data cannot introduce markup. Whether your CMS permits raw HTML is a separate question.
Your data stays on your device
Your data is processed locally in your browser and is not uploaded to our server. This page keeps working after you go offline, because there is nothing to send.