What is a JSON to HTML table converter?
A JSON to HTML table converter turns JSON data into semantic HTML <table> markup. Objects become Key and Value rows, arrays of similarly shaped objects become record tables, and other arrays use Index and Value rows.
This converter generates an HTML fragment for copying into a page or template. It does not add CSS, a document wrapper, or scripts to the generated Code.
How to convert JSON to an HTML table
- Paste strict JSON into the editor, open a
.jsonor.txtfile, or select Example. - Open Settings if you want primitive arrays or leaf objects to remain as nested tables, or need a custom separator between merged leaf fields.
- Select Convert to HTML Table. Invalid JSON stays in the editor with diagnostics that link to the source.
- Review the generated fragment in Code, or switch to Preview to inspect the table with temporary viewer styles.
- Select Copy HTML to copy the fragment, or Download HTML to save it as an
.htmlfile.
Select Edit JSON to change the input. Convert it again to replace the existing result. While viewing a result, setting changes regenerate Code and Preview after a 300 ms pause, so consecutive changes trigger only the latest conversion.
How JSON structures map to HTML tables
| JSON value | Generated table |
|---|---|
| Object | Key and Value columns |
| Array of objects | Index first, followed by the first-seen union of direct fields |
| Array of primitive values | Values merged into one comma-separated string cell |
| Leaf object field | key: value pairs merged into one string cell |
| Mixed array | Index and Value columns |
| Root string, number, boolean, or null | One Value column |
| Empty object or array | Matching headers with an empty table body |
When object records do not contain the same fields, missing values become empty cells. Duplicate object keys remain in source order; duplicate columns are labeled with an occurrence number such as name (2).
Merged values and nested JSON tables
Primitive arrays are merged with a comma and space by default. A leaf object whose direct fields are all primitive values is merged into key: value pairs. Pairs use one space by default, or a custom separator of up to eight characters.
Turn either merge option off to render that value as a nested <table class="json-table">. Objects containing another object or any array are never treated as leaf objects, even when that array can be merged separately. Other nested objects and arrays continue to use nested tables, so deeply nested JSON does not require field flattening or dot-path column names.
Merge settings apply only to the current page session and reset to their defaults after a refresh.
The converter does not impose a separate nesting option or product-level depth limit. The practical limit is the browser memory available to parse and render the input.
Code and Preview
Code contains the exact HTML fragment produced by the converter. It always includes semantic <table>, <thead>, <tbody>, and scoped header cells with consistent two-space indentation.
Preview displays that same fragment inside an isolated, script-free frame. The borders, spacing, and nested-table layout shown there are only preview styles; they are not included in copied or downloaded Code.
Safe HTML escaping
JSON keys and values are inserted as escaped text. Characters such as <, >, &, quotes, and apostrophes cannot become tags, attributes, or scripts in the generated table.
Strings are decoded before display, while numbers, booleans, and null retain their original JSON text. This also avoids rounding large JSON integers during conversion.
JSON to HTML Table vs JSON to Table
| Tool | Primary purpose |
|---|---|
| JSON to HTML Table | Generate reusable HTML <table> markup and preview it. |
| JSON to Table | Browse JSON as read-only tables, then filter, sort, or export the current level. |
| JSON Viewer | Inspect the complete JSON hierarchy as a collapsible tree. |
Use this converter when HTML code is the intended output. Use JSON to Table when you want an interactive data viewer instead of markup.
JSON to HTML table FAQ
Does the generated HTML include CSS?
No. The Code output is a table fragment without styles. Preview uses separate viewer-only CSS so the generated markup remains portable.
Can nested arrays and objects be converted?
Yes. Containers that are not merged become semantic tables inside their parent cells. Primitive arrays and leaf objects are merged into one cell by default, and both behaviors can be disabled in Settings.
How are leaf objects merged?
Each direct primitive field becomes a key: value pair. Pairs use one space by default, or the custom separator entered in Settings. Objects containing an array or another object remain nested tables.
Does the converter flatten nested JSON?
No. It preserves the hierarchy with nested tables rather than creating dot-path columns or expanding arrays into unrelated rows.
Can I edit the generated HTML?
The result is read-only. Edit the JSON source and convert again, or copy the HTML into your own editor for template-specific changes.
Is the Preview allowed to run scripts?
No. The Preview uses a sandboxed frame without script permission, and every JSON key and value is HTML-escaped before rendering.