JSON to HTML Table
Convert a JSON array into a proper HTML table — thead, tbody, and scope="col" on the header cells so screen readers announce it correctly. Everything is HTML-escaped, so values containing < or & are safe to paste into a page.
How to convert JSON to an HTML table
- Paste your JSON array. Keys from every record are merged, so records with different shapes still line up in the same columns.
- Add a Caption if the table needs a title —
<caption>is the accessible way to label a table. - Add a CSS class to hook the table into your existing stylesheet.
- Tick Wrap in a full HTML document to get a standalone
.htmlfile with minimal borders and padding — useful for a quick preview or an email. - Copy the markup, or download it as
.html.
Accessibility notes
A few details that separate a table screen readers can navigate from a grid of anonymous cells:
- Header cells use
<th scope="col">, so assistive tech can announce which column a value belongs to. - The caption stays inside the table rather than becoming a heading above it — that keeps the label programmatically tied to the data.
- No layout tables. This output is a data table; if you only need visual columns, use CSS grid instead.
Other table targets
For a README or a ticket, JSON → Markdown table is easier to read in plain text. For a spreadsheet, JSON → CSV or JSON → TSV paste straight into Excel and Google Sheets. Going the other way, HTML table → JSON scrapes a table you already have.
Privacy
Nothing is uploaded. The conversion runs in this tab using your own browser's JavaScript engine — no server sees your data, and the page keeps working with the network disconnected.
FAQ
Is the output escaped against XSS?
Values are escaped for &, <, >, " and ', so JSON content cannot break out of a cell or inject a tag. That said, if the JSON came from untrusted input, escape again on your server as defence in depth.
Can I control column order?
Columns follow the key order of your records — the first record sets the order, later records append any new keys. Reorder the keys in the JSON to reorder the columns.
What happens to nested objects?
By default they flatten into user.name-style columns. Switch Nested objects to Keep as one JSON column to keep the raw JSON in a single cell instead.