JSON to HTML table converter
Handy for showing API data or an export file on a web page or in an email without writing tags by hand.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter json text.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Columns are all keys found across the objects in first-seen order, and each object is a row. An array of arrays gives rows without headers, a single object gives one row. Nested values are written as JSON text, and &, <, > and " are escaped.
Example
Result: HTML table: <table> <thead> <tr> <th>name</th> <th>city</th> <th>age</th> </tr> </thead> <tbody> <tr> <td>سارة</td> <td>جدة</td> <td></td> </tr> <tr> <td>Omar</td> <td></td> <td>34</td> </tr> </tbody> </table>; Rows: 2; Columns: 3.
[{"name": "سارة", "city": "جدة"}, {"name": "Omar", "age": 34}]<table>
<thead>
<tr>
<th>name</th>
<th>city</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>سارة</td>
<td>جدة</td>
<td></td>
</tr>
<tr>
<td>Omar</td>
<td></td>
<td>34</td>
</tr>
</tbody>
</table>Limits and caveats
- Nested data does not become sub-tables, it appears as JSON text inside the cell.
- The markup has no CSS, add the styles that fit your site.
Questions about this tool
What if objects have different keys?
Every key found in any object becomes a column, and the cell stays empty in rows that lack it.
Is the markup safe to paste into my page?
The characters <, >, & and " are escaped in every cell, so text such as <script> never turns into running code.
Does it handle Arabic and right to left?
Yes, Arabic text is copied as is. Add dir="rtl" to the <table> tag if you want the columns ordered from the right.