JSON to HTML Table

This tool turns a JSON array of objects into a ready-to-paste HTML table. It is handy when an API or export gives you JSON but you need a quick table for a web page, a documentation block, or an HTML email — without writing the markup by hand.

How it works

1. The JSON is parsed and validated to be an array of objects.
2. The tool collects the union of all keys across every object, in first-seen order, to form the header row. This means objects that omit a key still align — the missing cell is simply blank.
3. It emits a semantic <table> with a <thead> of <th> headers and a <tbody> of one <tr> per object.
4. Every value is HTML-escaped (<, >, &, ", '), and nested objects/arrays are JSON-stringified so nothing is dropped.

Example

Input:

[
  { "name": "Ada", "role": "Engineer" },
  { "name": "Alan", "role": "Mathematician" }
]

Produces a two-column table with name and role headers and two rows. Toggle inline borders when you need the table to look right inside an email client that strips external CSS.

Notes

Because keys are unioned across all rows, heterogeneous arrays still render cleanly. Escaping is applied to both headers and cell values, so the snippet is safe to drop straight into a page. Everything runs locally — your JSON never leaves the browser.

Common use cases

Embedding API data in documentation. REST APIs return JSON; documentation pages need tables. Rather than manually formatting each record as a table row, paste the API response array and generate the table in seconds. The output is pure HTML that you can drop into any static site, CMS, or Markdown file that supports inline HTML.

Quick reports in email. Most email clients strip CSS but render plain table elements. The inline-borders option adds minimal border and padding styles directly on td and th elements so the table looks reasonable even in clients that ignore external stylesheets.

Data QA at a glance. When reviewing a JSON dataset — checking for missing fields, spotting unexpected nulls, or confirming that records look right — a rendered table is much faster to scan visually than raw JSON.

Prototyping data-driven UIs. Paste the response your API will return and see it as a table immediately, before writing any front-end code.

Why HTML escaping matters here

Cell values can contain characters that are special in HTML: <, >, &, ", and '. Without escaping, a value like "user <admin>" would break the table structure or, in the worst case, allow script injection if the table is placed in a page that also renders user-supplied data.

This tool escapes all five HTML-sensitive characters in both header text and cell values, so the generated snippet is safe to embed regardless of what your data contains.

Styling the generated table

The output uses semantic table / thead / tbody / th / tr / td markup with a class name you can target in CSS. A minimal stylesheet to make the table presentable:

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
th { background: #f5f5f5; font-weight: 600; }
tr:nth-child(even) { background: #fafafa; }

If you need the table to work in an email or environment without a linked stylesheet, enable the inline borders option and the tool adds those styles directly on the elements.