Developer / SEORuns in your browser

JSON to HTML table Converter

Render a JSON array as clean HTML table markup — keys become <th scope="col"> headers, nested objects become dotted columns, and every value is escaped.

Quick presets

Flatten nested keys (a.b)

Caption

CSS class

Compact (no padding)

JSONOpen file

HTML table

Table preview –

Runs in your browser — nothing you enter is uploaded or stored.

ToolFeather · JSON → HTML

Scratchpad auto-saved

Stored in this browser (localStorage)

Step-by-step~40s read

How it works — in four simple steps

No signup and nothing to install — it all runs in your browser.

Add your JSON

Paste it into the left box, press Open file, or drag a .json file onto it. Sample loads a realistic example.

Set the options

Adjust the options above the boxes — the output updates instantly as you change them.

Check the result

Read the status line: it reports rows, keys and any value that couldn't be represented in HTML table.

Copy or download

Copy the HTML table or download it as a .html file. Nothing was uploaded at any point.

Pro tip

Every value is escaped, so JSON from users or third-party APIs can't inject markup into your page.

Features

Nested data flattened

Nested objects become dotted columns (address.city), and arrays of plain values are joined so every row fits the grid.

Accessible markup

Header cells get scope="col", and you can add a <caption> and a CSS class for styling.

Readable or compact

Padded columns that line up in a code editor, or compact output for the smallest diff.

Private by design

Parsing and conversion run in your browser with JavaScript — your data is never uploaded, logged or stored.

About the JSON to HTML table Converter

Showing JSON data on a web page, in an admin email or a status report usually means a table. This converter takes the array in your JSON (or the first array of objects inside it), uses the union of all keys as columns, and writes semantic markup — thead, tbody, th scope="col" — that you can drop into any page or template.

Nested objects are flattened into dotted headers (owner.name), arrays of plain values are joined with semicolons, and arrays of objects are shown as compact JSON. Every value is HTML-escaped, which matters when JSON comes from users or third-party APIs: a value like <img onerror=…> is shown as text and can't run.

Add a caption for context and accessibility, a CSS class for your framework's styles, or tick Compact for one-line output.

Examples

A list of repositories from an API, with a nested owner object and an unsafe-looking description that must be escaped.

JSON input

[
  { "repo": "toolfeather", "stars": 1280, "owner": { "name": "pratik", "type": "User" }, "description": "Free <fast> tools" },
  { "repo": "data-js", "stars": 342, "owner": { "name": "feather-labs", "type": "Org" }, "description": "CSV & JSON engine" }
]

HTML table output

<table>
  <caption>Repositories</caption>
  <thead>
    <tr>
      <th scope="col">repo</th>
      <th scope="col">stars</th>
      <th scope="col">owner.name</th>
      <th scope="col">owner.type</th>
      <th scope="col">description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>toolfeather</td>
      <td>1280</td>
      <td>pratik</td>
      <td>User</td>
      <td>Free &lt;fast&gt; tools</td>
    </tr>
    <tr>
      <td>data-js</td>
      <td>342</td>
      <td>feather-labs</td>
      <td>Org</td>
      <td>CSV &amp; JSON engine</td>
    </tr>
  </tbody>
</table>

This output was produced by the converter on this page with caption “Repositories” — load it with the “Repo list” preset above and change any option to see the effect.

How JSON maps to HTML table

In JSON	Becomes in HTML table
Array of objects	one `<tr>` per object
Keys	`<th scope="col">` headers
Nested `{"owner": {"name": …}}`	header `owner.name`
`["a", "b"]`	`a; b`
`<script>` in a value	escaped text
`null`	empty cell

Things that trip people up

Need it live on a page? This generates static markup. For data that changes, render the table in your app from the JSON instead.
Huge arrays. Thousands of rows make heavy pages. Paginate, or show a summary and link to a CSV download.
Booleans and numbers. They're written as plain text (true, 42); format them in your template if you need ✓ or currency.
Column order. Columns appear in the order keys first appear across the objects.

JSON vs HTML table at a glance

Property	JSON	HTML table
Specification	RFC 8259 (2017) · ECMA-404	HTML Living Standard (WHATWG)
File extension	.json	.html
Media type	application/json	text/html
Data types	string, number, boolean, null, object, array	text (any inline HTML)
Comments	No	Yes <!-- -->
Nesting	Unlimited	Cells can span rows/columns

JSON: Numbers are parsed as IEEE-754 doubles in JavaScript, so integers above 9,007,199,254,740,991 (2⁵³ − 1) lose precision.
HTML table: Use for header cells and a so screen readers can announce the table properly.

Frequently asked questions

5 answers

How do I display JSON as an HTML table?

Paste a JSON array of objects; the converter writes a table with one row per object and one column per key. Copy it into your page.

Is it safe for untrusted JSON?

Yes. All values are HTML-escaped, so markup or scripts inside the data are displayed as text, not executed.

Can I add Bootstrap classes?

Yes — enter them in the CSS class box, for example table table-sm table-hover.

What about nested JSON?

Nested objects become dotted column headers; untick Flatten nested keys to show them as JSON in one column.

Is my data uploaded anywhere?

No. The JSON is parsed and converted by JavaScript in your browser tab; nothing is sent to a server, so it is safe for internal exports, customer lists and configuration files with secrets.