JSON to HTML Table Converter Online – Flat or Nested Tables

How to use the JSON to HTML Table Converter

Paste or upload your JSON, or click Sample to load example records.

Choose a Layout: Auto, Single flat table or Nested tables.

Pick a Styling option: No CSS, Bordered or Striped rows, then click Convert to HTML.

Switch between the Code and Preview tabs, then Copy the markup or Download it as an .html file.

Convert JSON to HTML table markup you can paste anywhere

This JSON to HTML converter produces a plain <table> from your data, ready for a CMS page, an internal wiki, an email report or documentation. There is no JavaScript and no framework in the output, just semantic thead, tbody, th and td elements, so it works wherever HTML is accepted.

Example: records with a nested object and a list

[
  { "id": 1, "name": "Ava", "address": { "city": "Denver" }, "tags": ["a", "b"] }
]

With Layout on Auto, the nested values keep their shape:

<table>
  <thead>
    <tr><th>id</th><th>name</th><th>address</th><th>tags</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Ava</td><td><table><tbody><tr><th>city</th><td>Denver</td></tr></tbody></table></td><td><ul><li>a</li><li>b</li></ul></td></tr>
  </tbody>
</table>

The address object turned into a small key/value table inside its cell, and the list of tags became a bulleted list. Switch to Single flat table and the same record is spread across columns named address.city, tags.0 and tags.1 instead.

Choosing a layout

Auto – checks your records. If every record is an object with only plain values, you get one flat table with a header row. As soon as a nested object or array appears, it switches to nested tables so nothing is hidden.
Single flat table – always one table. Nested fields are flattened into dot-notation columns, which is the better choice for data you plan to sort or copy into a spreadsheet.
Nested tables – mirrors the JSON structure. Arrays of objects become tables with a header, other arrays become <ul> lists, and objects become two-column tables with the key in a <th>. Wrappers such as {"data": [ … ]} stay visible as an outer row labelled data.

Whenever a flat table is produced, the records are located the same way as for CSV export: single-key wrappers are opened and the array of objects is used as the rows. A single object with plain values becomes a one-row table.

Styling options

No CSS outputs bare markup that inherits the styles of the page you paste it into. Bordered puts a <style> block before the table with collapsed 1-pixel borders, cell padding, an Arial 14px font and a blue header row with white text. Striped rows adds a light gray background on every other body row.

The generated rules use plain selectors like table and th, so they apply to every table on the page. If you embed the result in a site with other tables, add a class to the table and prefix the rules with it. Some email clients strip <style> blocks; for newsletters, No CSS plus inline styles added in your email tool is more dependable.

The Preview tab

The Preview tab renders the table in an isolated frame. Note that the preview applies a light default stylesheet so the table is legible even with No CSS; the copied code contains only what the Code tab shows.

Download behaves differently per tab. From the Code tab you get json-to-html.html containing just the markup, which is what you want for pasting into a template. From the Preview tab you get a complete standalone page, with doctype and the preview stylesheet, that opens nicely in any browser or can be attached to an email as a report.

Flat or nested: which one to publish?

Flat tables are easier to scan, sort and copy into a spreadsheet, and they work with table plugins that expect one value per cell. Nested tables are more honest about hierarchical data, such as orders with line items, because related values stay together instead of spreading over dozens of numbered columns. For records with long arrays, nested output is usually far narrower.

Safe output for untrusted data

Every key and value is HTML-escaped. A name like Ava <admin> is written as Ava <admin>, ampersands become & and quotes become ", so data from an API cannot inject tags into your page. null becomes an empty cell, and booleans and numbers are printed as text.

Related tools

To build a table by hand rather than from data, use the HTML table generator. For a README or a pull request, the Markdown table generator is a better fit, and HTML to JSON reads tables back into records.

Privacy

Conversion and preview happen in your browser, and the JSON is not uploaded. Load URL and Save & Share are the only features that send data to our server.

Frequently asked questions

How do I show nested JSON in an HTML table?

Choose Nested tables, or leave Layout on Auto, which switches to nested tables when your records contain objects or arrays. Each nested object becomes a small table inside its cell and each list becomes a bulleted list.

Can I add my own CSS class to the table?

Not from the options. Copy the markup and add class="..." to the opening table tag, then style it in your own stylesheet. Choose No CSS so the generated rules do not conflict with yours.

Why does the preview look styled when I chose No CSS?

The Preview tab uses a small built-in stylesheet so the table is readable. The markup in the Code tab has no styles; it will look like the surrounding page once you paste it.

Is the output safe to insert into a web page?

Keys and values are escaped, so text such as appears as text instead of running. As with any markup from another source, review it before publishing.