Home › Developer Tools › JSON to HTML Table

JSON to HTML Table

Paste a JSON array and get ready-to-paste HTML table code plus a live preview. Columns are collected from every object, nested values can be shown as JSON, flattened or as nested tables, and you can add a CSS theme or inline styles for emails.

Nested values

Table style

CSS

Headers

Class name

Caption (optional)

JSON

Upload

HTML code

PreviewRendered exactly as the code above

How to use the JSON to HTML Table

Paste your JSON, upload a .json file or load the sample. An array of objects works best.
Choose how nested values appear: as JSON text, flattened into columns like address.city, or as nested tables.
Pick a style and whether the CSS goes in a <style> block, inline on each cell (best for email) or not at all.
Fine-tune headers, number alignment, links, caption and class name.
Check the preview, then copy the HTML or download it as an .html file.

How JSON becomes a table

JSON input	Table result
`[{"a": 1, "b": 2}, {"a": 3, "c": 4}]`	2 rows; columns a, b, c (missing values are empty cells)
`["red", "green", "blue"]`	One column named value, one row per item
`[["Name", "Age"], ["Ann", 31]]`	First row used as the header because it is all text
`{"name": "Ann", "age": 31}`	Two columns: Property and Value
`{"u1": {"name": "Ann"}, "u2": {"name": "Bo"}}`	One row per property, with its name in the key column
`{"total": 2, "data": [{…}, {…}]}`	The `data` array is found and converted

The generated HTML

The output is semantic, accessible table markup: a <table> with an optional <caption>, a <thead> whose header cells carry scope="col", and a <tbody> with one <tr> per record. Screen readers use the scope attribute to announce the column name with each cell. Numeric columns can be right-aligned so digits line up, which makes amounts and counts easier to compare.

All text is escaped (< becomes <, quotes become entities), so the code is safe to paste into any page even when the data contains HTML. Line breaks inside strings become <br>.

Tips for tables in emails and CMSs

Email: choose Inline styles. Gmail, Outlook and many other clients remove or ignore <style> blocks, but they keep style attributes.
WordPress and other editors: paste the code into an HTML or Custom HTML block, not the visual editor.
Wide data: wrap the table in <div style="overflow-x:auto"> so it scrolls sideways on phones instead of breaking the layout.
Your own CSS: choose No CSS and set a class name that your stylesheet already targets.

Frequently asked questions

What JSON structure does the converter expect?

An array of objects, such as [{"name": "Ann", "age": 31}, ...], where each object becomes a row and each key a column. It also accepts an array of plain values (one column), an array of arrays (the first row becomes the header if it is all text), a single object (shown as a property/value table) and an object whose values are objects (each becomes a row with its key in the first column).

What if objects have different keys?

The columns are the union of all keys, in the order they first appear. A row that lacks a key gets an empty cell, so no data is lost.

How are nested objects and arrays shown?

You choose. JSON text writes the nested value as compact JSON inside the cell. Flatten creates one column per nested key, such as address.city, and joins arrays of simple values with commas. Nested table renders a small table inside the cell.

Should I use a style block or inline styles?

A style block keeps the HTML small and is ideal for web pages. Inline styles put the CSS on every cell, which is what email clients like Gmail and Outlook need, because many of them strip style blocks.

Is the output safe to paste into my page?

Yes. All text from the JSON is HTML-escaped, so values like <script> appear as text and cannot run. Only http and https links are turned into clickable links.

Is my data uploaded?

No. The conversion and preview run entirely in your browser, so your JSON never leaves your device.

Related tools