JSON to HTML Table
Convert JSON to an HTML table online: choose thead/tbody, class, id, caption and indentation, see a live preview and copy the markup. Runs in your browser.
How to use JSON to HTML Table
- 1Paste a JSON array of objects, or open a .json file.
- 2Pick the indent, whether to include thead and tbody, and optionally a class, id and caption under More options.
- 3Check the preview, then copy the markup or download table.html.
What makes it better
- All cell text, headers and captions are HTML-escaped
- Optional thead/tbody, class name, id, caption and row numbers
- 2-space, 4-space or minified output
- Nested objects are flattened with a separator you choose
- Preview is built from plain text nodes, never raw HTML
About JSON to HTML Table
JSON to HTML Table turns an array of objects into table markup you can paste into a page, an email template or a CMS. Every cell, header and caption is HTML-escaped, so text such as <script> is shown as text and cannot run. The markup covers up to 20,000 rows and the preview shows the first 200.
Common uses
- Drop an API response into an internal wiki or documentation page as a readable table.
- Build a quick table for an HTML email without writing every tr and td by hand.
- Hand a CMS editor a snippet that already carries your Bootstrap or Tailwind table class.
- Check how a JSON export looks as rows and columns before sharing it.
Example
Input
[{"name":"Asha","role":"Engineer"},{"name":"Ravi","role":"Designer & Writer"}]Result
<table>
<thead>
<tr>
<th scope="col">name</th>
<th scope="col">role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Asha</td>
<td>Engineer</td>
</tr>
<tr>
<td>Ravi</td>
<td>Designer & Writer</td>
</tr>
</tbody>
</table>Good to know
- Nested objects become dotted column names such as address.city, and arrays become indexed columns such as tags.0. The markup has no styling beyond the class you add.
- The markup includes at most 20,000 rows and the preview shows 200; a message tells you when either limit applies.
- Class and id values are reduced to letters, digits, hyphens and underscores so they cannot break out of the attribute.
JSON to HTML Table FAQ
Is the HTML safe to paste into a page?
Cell text, header names and the caption are escaped, so characters such as <, > and & appear as text instead of being parsed as tags. The class and id you type are filtered to safe characters. You should still follow your own site's content rules when publishing.
How are nested objects and arrays shown in the table?
Nested objects are flattened into one column per leaf using the separator under More options, so address.city becomes its own column. Arrays inside records are spread into indexed columns such as tags.0 and tags.1.
Can I get a table without thead and tbody?
Yes. Turn off Include thead and tbody and the header row is emitted as the first row of the table. Using thead and tbody is better for accessibility and styling, so leave it on unless a template needs the flat form.
What happens with a very large JSON array?
The generated markup stops at 20,000 rows and says how many rows were left out. The live preview shows only the first 200 rows so the page stays responsive, and inputs over 20 MB are refused.
Why is my column order different from the JSON?
Columns appear in the order each key is first seen across all records, so a key that only shows up in the third object is added at the end. Records without a key get an empty cell.