JSON to HTML Table
Convert a JSON array of objects into a formatted HTML table.
or drop a file here
| name | age | city |
|---|---|---|
| Alice | 30 | London |
| Bob | 25 | Paris |
| Carol | 35 | Berlin |
How JSON-to-HTML table conversion works
Paste a JSON array of objects and this tool builds a complete HTML <table> with <thead> and <tbody> sections. Column headers are automatically derived from the object keys, and every cell value is HTML-escaped so the output is safe to use directly. Toggle Bordered to add inline border styles, and Striped rows for alternating row backgrounds — both options produce self-contained HTML that works without any external CSS.
For the reverse direction, use the CSV to HTML Table converter, or JSON Formatter to pretty-print your JSON first.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Producing a readable table from an API response for a report or a wiki page.
- Turning a JSON dataset into markup you can paste into a page.
- Generating a quick table for an email or a document.
- Rendering a payload for a non-technical reader.
- Producing a table to eyeball a column for outliers.
Frequently Asked Questions
- What JSON shape does it need?
- An array of objects — each object is a row and each key a column. A bare object, a nested structure or an array of arrays is rejected with a message rather than guessed at, because there is no single obvious table for those shapes.
- What if my objects have different keys?
- Columns are the union of every key across every row, in first-seen order, so no field is silently dropped because it was missing from the first record. Rows lacking a key get an empty cell rather than a shifted one, which is the failure most naive converters produce.
- How are nested values shown?
- Serialised back to JSON inside the cell, so an address object appears as its literal JSON text. It keeps the data visible instead of printing [object Object], but a table is a flat structure — flatten nested fields into their own columns first if you want them sortable.
- Is the output safe to paste into a page?
- Yes for the data. Ampersands, angle brackets and quotes are escaped, so a value containing <script> renders as visible text rather than executing. Escaping the data is the part that matters; the surrounding markup is generated, not user-supplied.
- Why are there no inline styles on every cell?
- Because a table with a style attribute per cell is unmaintainable. The border and striping options emit classes and a small stylesheet instead, so you can restyle the whole table from one place — and drop the CSS entirely if your site already styles tables.
Common errors and gotchas
- Pasting the output into a page without escaping, where a value containing markup becomes an injection.
- Assuming nested objects flatten sensibly, since a table has no place for them.
- Losing records whose keys differ, where a column present in only some objects is ambiguous.
- Producing a table with no header, which loses the meaning of every column.
- Generating a table so wide it breaks the page layout rather than scrolling.
Related Converters tools
JSON to YAML
Convert JSON into clean, readable YAML instantly.
YAML to JSON
Convert YAML configuration into valid JSON.
JSON to XML
Convert JSON structures into nested XML markup.
HWB to HEX Converter
Convert an HWB color to HEX.
JSON to SQL
Turn a JSON array of objects into SQL INSERT statements.
CSV to XML
Convert CSV rows into structured XML records.
XML to CSV
Flatten repeated XML records into CSV rows.
INI to JSON
Parse INI config sections and keys into JSON.