About JSON to HTML Table
JSON to HTML Table turns an array of objects into a table element you can paste into a page. The keys of the first object become the header row and each object becomes one row of cells, so an array of two records with the keys name and age comes back as a two-column, two-row table wrapped in a header row and a body row, with no styling attached.
The text is read by the platform JSON parser rather than by a hand-written one, so the rules are the familiar ones: an array becomes the rows, a single object is wrapped into a one-row table, and anything the parser rejects stops the page with an error message in place of the result. There is no tolerance for trailing commas, comments or the relaxed JSON5 dialect - the input has to be valid JSON.
One property makes the output safe to drop straight into a page. Ampersands and the two angle-bracket characters are replaced by their HTML entities in both the headers and the cell values, so a value containing markup is displayed as literal text rather than being interpreted as a tag. That is the difference between a table generator that is only convenient and one that is also safe to use with data you did not write.
The structural rule to plan around is that the header comes from the first element alone. A key that appears only in later objects never gets a column, and its value is quietly dropped, so records with inconsistent shapes lose data without warning - normalise them first if the differences matter. Values are flattened to text on the way in as well: a nested object prints as the unhelpful text object, an array is joined with commas inside a single cell, and booleans appear as true or false. There is no merging of all the keys across the array, no markup to mark a column as numeric or right-aligned, and no class, border or style attribute on the table, so it renders as an unstyled grid unless the surrounding page supplies the CSS.
How to use JSON to HTML Table
- 1 Paste a JSON array of objects, or a single object to get a one-row table.
- 2 The table markup appears immediately, with the header taken from the first element.
- 3 Copy the markup into a page or template and style the cells with your own CSS.
- 4 Check that every record shares the same keys before you rely on the result.
Frequently asked questions
What happens if the objects have different keys?
The columns are decided by the first object only. A key that appears solely in later objects does not become a column and its values are dropped, and an object missing a key gets an empty cell. Make the records share a shape first if the differences carry meaning.
Is the table safe to use with untrusted values?
Yes. Ampersands and the angle-bracket characters are converted to their HTML entities in headers and cells alike, so a value containing markup is shown as text rather than interpreted. That is what keeps a generated table from becoming an injection point.
How are nested objects and arrays shown?
They are flattened into the cell as text. A nested object appears as the text object, an array is joined with commas in one cell, and a number or boolean is printed as text. Flatten the JSON first if you want each nested value in its own column.
Why does the table have no borders or styling?
Because the output carries no attributes at all - no class, no border and no style. That keeps the markup neutral so your own stylesheet can style the table, but it also means an unstyled page shows a plain grid until you add the CSS.
Free, online, and private
Free to use
JSON to HTML Table is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How JSON to HTML Table behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Input | one text panel, recalculated live; the sample holds a JSON array of two objects with the keys name and age |
| Parsing | the text goes through the platform JSON parser - an array of objects becomes rows, and a single object is wrapped into a one-row table |
| Headers | the columns and their order come from the keys of the first element only |
| Escaping | ampersands, less-than and greater-than signs in both headers and cells are replaced by their HTML entities |
| Missing values | a key that the first element lacks prints as an empty cell, and a null value prints the same way |
| Output | a bare table element with a thead and a tbody and no attributes at all, so the sample becomes a two-column, two-row table |
Compiled from the implementation of this tool and checked against it by itoolnet.
What JSON to HTML Table does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- The header row is decided by the first element alone. A key that appears only in later objects never gets a column and its value is silently dropped, and an array whose first element is a string or a number produces index headings or none at all - there is no merge of all the keys.
- Values are flattened to text. A nested object prints as [object Object], an array joins with commas inside one cell, and booleans print as true or false - no nesting, no links, and no way to mark a column as numeric or right-aligned.
- Input that the parser cannot read stops the page with an error message in place of a result, with no tolerance for trailing commas, comments or JSON5 - and the table carries no border, class or style attribute, so it renders as an unstyled grid unless the surrounding page supplies CSS.
Tested and documented by itoolnet, the team that builds and maintains this site.