How to Convert JSON to an HTML Table
You've got a JSON response from an API and you need it as a table on a page — hand-writing all those rows is a waste of time. This converter does it in one paste. It reads your JSON array of objects, scans every record to build a single set of columns (so records with slightly different fields still line up), and emits a clean, semantic HTML table with a proper thead and tbody. Values are HTML-escaped, nested objects are shown as compact JSON, and you can add a CSS class to match your framework. Check the live preview, then copy or download. Everything runs in your browser, so nothing is uploaded.
Paste your JSON
Paste an array of objects or load the sample; it's parsed locally with nothing uploaded.
Style the table
Add a CSS class and toggle the header row and minify.
Copy or download
Grab the HTML with one tap or save it as an .html file.
JSON vs HTML Tables — What's the Difference?
JSON — JavaScript Object Notation
A structured data format built from objects and arrays. It's ideal for storing and transmitting records, but it isn't something a browser renders as a table — it's the data layer, meant to be consumed by code rather than read as a grid.
HTML table markup
A set of table, thead, tbody, tr, th and td elements that browsers render as a real, styleable grid. It's the presentation layer you embed in a page. Converting JSON to HTML turns your data into a table people can actually see and interact with.
Common Use Cases
Render API data
Turn a JSON API response into a table you can paste straight into a page.
Static reports
Build HTML tables from JSON for reports, dashboards and exports.
Docs & blogs
Embed data tables in articles and documentation from a JSON source.
Email tables
Produce simple semantic tables for HTML emails from JSON records.
Framework-ready
Add a Bootstrap or Tailwind class so the table matches your design instantly.
Quick inspection
See a JSON array as a readable grid to understand its shape at a glance.
Prototyping
Mock up data tables with real JSON while building a UI.
CMS content
Paste generated markup into a CMS that accepts raw HTML.
Tips & Best Practices
Use an array of objects
Each object becomes a row and each key a column — the cleanest input for a tabular result.
Add a framework class
Enter your table class so the output matches your existing design with zero extra CSS.
Expect unioned columns
If records have different keys, every key becomes a column and gaps are left empty — design around that.
Minify for production
Use minified output when embedding in a live page, and pretty output when you'll edit by hand.
Flatten deep data first
Deeply nested values are shown as JSON text; flatten them beforehand if you want individual columns.
Troubleshooting
It says expected an array of objects
The tool needs a JSON object or an array of objects. A bare array of numbers or strings has no columns to build from.
A cell shows JSON text
That value was a nested object or array. It's rendered as compact JSON so nothing is lost; flatten it first for separate columns.
Some cells are empty
Those records didn't have that key. Columns are unioned across all objects, so missing values appear as empty cells.
The table isn't styled
Raw HTML tables are unstyled by default. Add a CSS class matching your framework or wrap the output in your own styles.
Frequently Asked Questions
How do I convert JSON to an HTML table for free?
Paste your JSON array of objects above and semantic HTML table markup appears instantly, with a live preview. Copy it or download an .html file — free, no signup.
What JSON shape does it expect?
An array of objects works best, where each object is a row. A single object is treated as one row too.
What if my objects have different keys?
Every key across all objects becomes a column, and any record missing a key gets an empty cell, so the table stays aligned.
Does it create a proper thead?
Yes. With the header option on, the keys become th cells inside a thead and each record becomes a tbody row.
Can I add a CSS class?
Yes. Enter any class names — like 'table table-striped' — and they're added to the table element.
Is my data HTML-escaped?
Yes. Ampersands and angle brackets in your values are escaped so they display as text and can't break your page.
How are nested objects handled?
Nested objects and arrays are shown as compact JSON inside the cell so no information is lost.
Can I get minified HTML?
Yes. Turn on minify for compact markup with no extra whitespace, ideal for production pages.
Is there a live preview?
Yes. The rendered table is shown right below the markup so you can see exactly what you'll get.
Is my data sent to a server?
No. Everything happens inside your browser, so your data never leaves your device.
Can I download the result?
Yes. Save the output as an .html file, or copy it straight to your clipboard.
How large a dataset can it handle?
It comfortably converts arrays with many hundreds of records, all in your browser.
Will it work with Bootstrap or Tailwind?
Yes. Add the relevant class names and the generated table slots straight into your framework's styles.
Can I make a table without a header?
Yes. Turn off the header option and only the data rows are produced.
Does it work on phones?
Yes, in any modern browser on Windows, Mac, Android or iPhone with nothing to install.
Is this converter really free?
Completely free, forever — no account, no ads and no premium wall.
100% free · No signup · Processed in your browser · Data never sent
Last updated: August 2026 · FlipMyFormat JSON to HTML Converter
Written and maintained by the FlipMyFormat team · Runs entirely in your browser