Options
Paste JSON and a clean HTML table is built as you type, with a live preview and the HTML code one click apart. An array of objects becomes rows and columns, a single object becomes a field and value table, and nested data can be flattened into columns, shown as small tables inside cells, or kept as JSON text. If your data is wrapped inside an API response, like a data or results array, the tool finds it for you. Choose embedded CSS, inline styles, or bare HTML, set the header color, and copy the result into WordPress or any page. Everything runs in your browser.
How to convert JSON to an HTML table
- Paste your JSON into the left pane, or open a .json file.
- The table preview appears on the right. If the JSON has an error, the exact line and column are shown.
- If your JSON holds more than one list, pick the one you want under Table from.
- Choose how nested data and styling are handled, and add a caption if you want one.
- Click Copy HTML, or Download a ready-to-open .html file.
How JSON becomes a table
| JSON | Table |
|---|---|
Array of objects, like [{"id": 1, "name": "Ana"}] | One row per object and one column per key. A key missing from some objects leaves those cells blank. |
| Single object | A Field and Value table, or a single row if you choose One row |
Array of plain values, like ["red", "blue"] | A single Value column |
Nested object, like "address": {"city": "Austin"} | Flatten: an Address City column. Nested tables: a small table in the cell. JSON text: the object as text. |
List of values inside a field, like "tags": ["new", "sale"] | A comma-separated list in one cell |
| List of objects inside a field | A small table inside the cell |
null | An empty cell, or the word null if you turn on Show null as text |
Columns appear in the order their keys first show up. Numbers, true, and false are written exactly as they appear in your JSON, and columns that hold only numbers are right-aligned so digits line up.
Which style to choose
| Style | What you get | Best for |
|---|---|---|
| Embedded CSS | A short style block with rules scoped to the table's class | WordPress Custom HTML blocks and pages you control |
| Inline styles | Style attributes on every cell, with no style block | Email newsletters and editors that strip style blocks |
| No styling | Plain table markup | Sites whose theme already styles tables |
Text from your JSON is always HTML-escaped, so a value like <script> shows up as text instead of running. Turn URLs into links only links values that start with http:// or https://.
Adding the table to WordPress
In the block editor, add a Custom HTML block and paste the code. Use Preview in the block toolbar to check it. Keep Scroll container for wide tables turned on so tables with many columns scroll sideways on phones instead of stretching the page. If you put more than one table on a page with different colors, give each one its own class name.
Building tables from JSON with code
In Python, pandas can do it in one line: pd.json_normalize(data).to_html(index=False), where json_normalize flattens nested objects into dotted column names. In JavaScript, build the table with document.createElement and set each cell with textContent rather than innerHTML, which keeps text from your data from being run as HTML.
Frequently asked questions
Can it handle nested JSON?
Yes. Nested objects can be flattened into extra columns, shown as small tables inside cells, or written as JSON text. Lists of plain values become comma-separated text, and lists of objects become small tables.
My JSON is an object with a list inside it. Which part becomes the table?
On Auto, the tool uses the largest list of objects it finds, such as data, items, or results in an API response. You can pick a different list, or the whole object, under Table from.
What if my objects have different keys?
Every key from every object gets a column. Cells for keys an object doesn't have are left blank.
Is the HTML safe to paste into my site?
Yes. All text from your JSON is escaped, so tags inside values show as text and can't run. Links are only created for http and https URLs, and only when you turn that option on.
Can I change the colors?
Pick any header color and the text color adjusts for contrast. For more control, choose No styling and style the table's class with your own CSS.
Will the table work in an email?
Choose Inline styles. Many email clients remove style blocks, but they keep style attributes on each cell.
Does it work with large files?
Yes. The preview shows the first 500 rows to stay fast, and the copied or downloaded HTML includes every row.
Is my JSON uploaded anywhere?
No. The table is built in your browser and nothing is sent to a server.