JSON to HTML Table Converter

Paste a JSON array and get the HTML for a table you can drop into any page. Column names come from the keys of your objects, nested values can be flattened into their own columns, and every cell is escaped so odd characters cannot break your markup. Use it to show an API response, a price list or a product export on a page without writing the loop yourself.

What you enter

What you get

How it works

  1. Paste a JSON array of objects, such as an API response or a product export.
  2. Choose whether to include a header row, mark rows as striped, flatten nested data and add starter CSS.
  3. Check the row and column counts under the result.
  4. Copy the table code or download it as an HTML file, then paste it into your page.

Turning records into a readable table

A table is the right element when your content is data with rows and columns: prices, schedules, specifications, comparisons. It is the wrong element for page layout, which belongs to CSS. Because JSON from an API is already a list of records, the conversion is mostly a matter of picking the columns and keeping the order stable.

This tool takes the columns in the order the keys first appear. If your table should read in a particular order, such as name before price, put the keys in that order in the first object. Long key names make poor headings, so rename them in the JSON before converting if the table is for customers.

Accessibility and layout basics

Header cells are written with th inside thead, which lets screen readers announce the column name before each value. If you remove the header row, readers lose that context, so only turn it off when the table is a pure grid with no meaningful headings.

On a phone, a table with many columns is wider than the screen. The reliable fix is a scrolling wrapper rather than shrinking the text. Keep cell padding generous and the text left-aligned for words and right-aligned for numbers so columns are easy to scan.

Tips

Frequently asked questions

How do I convert JSON to an HTML table?

Paste a JSON array of objects. The converter takes the keys as column headings, writes one row for each object and puts each value in a cell. For example, [{"a":1,"b":2}] gives one header row with a and b and one body row with 1 and 2.

What happens to nested objects?

With Flatten ticked, nested values get their own column named by their path, such as address.city. With it off, the nested value is written into a single cell as JSON text.

Is the output safe to paste into a page?

Cell text is escaped, so characters like <, > and & show as text and cannot inject tags. The markup uses plain table, thead, tbody, tr, th and td elements, which every browser and screen reader understands.

Does the table sort when clicked?

No. This tool gives you the static markup. Sorting needs a small script on your page, and a header row with th cells is the right base for adding one.

Is my JSON uploaded?

No. Everything is converted in your browser and nothing is sent to a server.

Related: HTML table generator, JSON formatter, JSON to CSV converter.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Free Tools

We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.

Product

Who It's For

Features

Resources

Company

View Sitemap