What This Tool Does
This tool converts a JSON array of objects into raw HTML <table> markup. It scans every object in the array and collects the union of all keys found across all of them, using that combined list as the column headers (each becomes a <th>). It then emits one <tr> row per object, with one <td> cell per column. Values are HTML-escaped so characters like &, <, and > render correctly instead of breaking the markup, and any value that is itself an object or array is converted with JSON.stringify and written inline as a single cell.
Important: the output box shows the HTML source code for the table, not a live rendered preview. The tool does not render the table for you inside the page — you take the generated markup and paste it into your own HTML page, CMS, or component where it will render as an actual table.
How to Use It
- Paste a JSON array of objects into the Input box on the left.
- Click Run. The tool collects the union of all keys across every object and builds the table markup.
- Review the generated
<table>HTML in the Output box. - Copy the output HTML and paste it into your page, CMS content block, or static site template.
- Style the table yourself with CSS (or your site's existing table styles) — the markup is unstyled by design.
- Click Clear to reset both fields and start over with new data.
Worked Example
Suppose the Input box contains this JSON array of two objects:
[
{ "name": "Alice", "role": "Engineer", "age": 30 },
{ "name": "Bob", "role": "Designer" }
]Notice the second object has no age key. The tool still builds the header row from the union of keys seen across both objects (name, role, age), and leaves the missing cell empty for the row where it's absent. Clicking Run produces:
<table>
<tr><th>name</th><th>role</th><th>age</th></tr>
<tr><td>Alice</td><td>Engineer</td><td>30</td></tr>
<tr><td>Bob</td><td>Designer</td><td></td></tr>
</table>Pasted into any HTML page, this markup renders as an actual three-column table with headers, once you apply borders or spacing with CSS.
Common Use Cases
- Embedding API data in a blog post — turn a JSON response into a readable table you can paste directly into a blog editor or documentation page.
- Documentation and knowledge bases — convert configuration objects, parameter lists, or sample payloads into tables for reference docs.
- Quick data display for internal tools — generate a table for an internal dashboard or admin page without writing table markup by hand.
- Static site generation — produce table HTML once from a JSON data file and drop it into a static page, no client-side rendering required.
- CMS content blocks — many CMS platforms accept raw HTML in a content block; this gives you table markup ready to paste in.
FAQ
Does it include CSS styling?
No. The output is plain, semantic <table>, <tr>, <th>, and <td> markup with no inline styles or classes. You style it yourself with your own CSS, a CSS framework's table classes, or your CMS's default table styles.
What if objects have different keys?
The tool builds the header row from the union of every key found across all objects in the array. If a particular object is missing one of those keys, its cell is simply left empty in that row.
Does it render a live preview of the table?
No. The output box shows the generated HTML source code, not a rendered table. To see it rendered, paste the markup into an HTML page or preview it in your CMS/editor.
What happens with nested objects or arrays as values?
A value that is itself an object or array is converted with JSON.stringify and placed inline as text inside its cell, for example {"city":"Berlin"}, rather than being flattened into extra columns.
Is my data uploaded anywhere?
No. The conversion runs entirely in your browser using JavaScript. Your JSON never leaves your device or gets sent to a server.
Related Tools & Guides
- JSON to Markdown Table Generator — generate a Markdown table instead of raw HTML, ideal for READMEs and docs written in Markdown.
- JSON to CSV Converter — export the same array data as CSV for spreadsheets and data pipelines.
- All JSON Tools — browse the full suite of JSON and Toon utilities.
- Blog — guides on JSON, Toon, and data workflows.