How to use the json to html table converter
- Paste your JSON array or object into the JSON input field.
- The converter parses the input and generates the json to html table markup automatically.
- Review the output to verify headers, rows and any nested formatting.
- Copy the generated HTML and paste it into your web page, template or email.
How the conversion works
The converter uses JSON.parse to read your input and build a json to html table structure. If the root value is an array of objects, every unique key across all objects becomes a column header in the <thead>, preserving the order in which keys first appear. Each object becomes a <tr> row in the <tbody>. Missing keys produce empty cells.
If the root is a single object, the table gets two columns: Key and Value. If the root is an array of primitives (strings, numbers, booleans), a single "Value" column is used. For example, the input [{"id":1,"name":"Alice"},{"id":2}] produces headers "id" and "name", with the second row leaving the name cell empty.
Handling nested data
HTML tables are inherently flat, but JSON often contains nested objects and arrays. When the converter encounters a value that is not a primitive, it serializes that value back into a compact JSON string. This keeps the table readable while preserving the full data structure.
For instance, if a row contains {"address":{"city":"Paris","zip":"75001"}}, the corresponding table cell will display {"city":"Paris","zip":"75001"}. Arrays like ["red","blue"] are rendered as ["red","blue"] inside the cell. You can later use JavaScript on your page to expand these cells if needed.
Escaping and security
Any text inserted into HTML must be escaped to prevent cross-site scripting (XSS) and broken layouts. The converter replaces five characters: & becomes &, < becomes <, > becomes >, " becomes " and ' becomes '.
This means if your JSON contains a value like <img src=x onerror=alert(1)>, it will render harmlessly as visible text in the table cell rather than executing as markup. Unicode characters such as accented letters, CJK ideograms and emoji pass through unchanged because modern HTML handles UTF-8 natively.
Common input formats
Here is a reference showing how different JSON shapes map to table structures when you convert json to html table markup:
| JSON shape | Table result |
|---|---|
| Array of objects | Keys become column headers, each object is a row |
| Single object | Two columns: Key and Value |
| Array of strings or numbers | One column: Value |
| Nested object value | Serialized as compact JSON inside the cell |
| null value | Rendered as the literal text "null" |
If you need other conversions, tools like json to markdown table or json to xml handle those specific output formats.
Styling the output
The generated markup is intentionally plain: a <table> element containing <thead> and <tbody> with no inline styles or class attributes. This makes it easy to apply your own CSS without overriding existing rules.
A minimal stylesheet to get started might include table { border-collapse: collapse; width: 100%; } and th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }. Because the output uses semantic elements, screen readers and search engines can interpret the table structure correctly.
Worked examples
| Example | Input | Result |
|---|---|---|
| Array of users | JSON input: [{"id":1,"name":"Alice","role":"admin"},{"id":2,"name":"Bob","role":"editor"}] | <table> / <thead> / <tr><th>id</th><th>name</th><th>role</th></tr> / </thead> / <tbody> / <tr><td>1</td><td>Alice</td><td>admin</td></tr> / <tr><td>2</td><td>Bob</td><td>editor</td></tr> / </tbody> / </table> |
| Nested objects | JSON input: [{"product":"Laptop","specs":{"ram":"16GB","disk":"512GB"},"tags":["sale","new"]}] | <table> / <thead> / <tr><th>product</th><th>specs</th><th>tags</th></tr> / </thead> / <tbody> / <tr><td>Laptop</td><td>{"ram":"16GB","disk":"512GB"}</td><td>["sale","new"]</td></tr> / </tbody> / </table> |
| Single object | JSON input: {"name":"Server","status":"online","uptime":99.9} | <table> / <thead> / <tr><th>Key</th><th>Value</th></tr> / </thead> / <tbody> / <tr><td>name</td><td>Server</td></tr> / <tr><td>status</td><td>online</td></tr> / <tr><td>uptime</td><td>99.9</td></tr> / </tbody> / </table> |
| Array of primitives | JSON input: ["apple","banana","cherry"] | <table> / <thead> / <tr><th>Value</th></tr> / </thead> / <tbody> / <tr><td>apple</td></tr> / <tr><td>banana</td></tr> / <tr><td>cherry</td></tr> / </tbody> / </table> |
FAQ
What JSON structures are supported?
The converter accepts arrays of objects, arrays of primitives, and single objects. If you provide an array of mixed types, primitives are placed under a "Value" column while objects contribute their keys as additional columns.
How are nested objects displayed in the table?
Nested objects and arrays are serialized back into compact JSON strings within the table cell. This preserves the data while keeping the table layout flat and readable.
Is the output safe to embed directly in a web page?
Yes. All cell content is HTML-escaped, converting angle brackets, quotes and ampersands into their entity equivalents to prevent XSS vulnerabilities.
Does this tool upload my JSON data?
No. Parsing and HTML generation happen entirely in your browser using JavaScript. Nothing is sent to any server.
Why does my JSON produce an error?
The input must be valid JSON. Common issues include trailing commas, single quotes instead of double quotes, or unquoted property names. The error message includes the exact detail from the parser to help you fix it.
Can I convert JSON to other table formats?
This tool specifically outputs HTML. For wiki-style or documentation tables, use the json to markdown table converter instead.