JSON to HTML Table
Convert a JSON array of objects into an HTML table online. Generate semantic table markup with thead, tbody, th, and td, escape values that contain HTML characters, preview the result, and copy the markup or download a standalone .html file.
Key Features
JSON Array to HTML Table
Turn an array of JSON objects into HTML rows and columns. Each object becomes a row, and the object keys become the header cells.
Semantic Table Markup
The output uses table, thead, tbody, tr, th, and td elements, with a json-table class instead of inline presentation attributes, so you can style it with your own CSS.
Escaped Cell Values
Every header and cell value is escaped before it is written into the markup. The characters &, <, >, double quote, and single quote become HTML entities, so JSON text is rendered as text instead of markup.
Copy or Download the HTML
Copy the generated markup to your clipboard, or download a standalone .html document that includes a minimal stylesheet so you can open the file directly in a browser.
Preview Before Exporting
Switch between the rendered table preview and the generated HTML source, and check the row and column counts before you copy or download anything.
Optional Nested Flattening
Flatten nested objects into dot-notation columns such as address.city. With flattening off, an object or array value is written into one cell as compact JSON text.
Paste or Open a File
Paste JSON into the editor or open a .json file from your device. Parsing and HTML generation happen in the browser.
Browser-Based Processing
Parsing, escaping, and HTML generation run in your browser. No account and no upload to a conversion server.
How to Use
Enter a JSON array of objects
Paste an array such as [{"name":"Alice"},{"name":"Bob"}] or open a .json file. Every item has to be an object, because each item becomes one row.
Choose nested data handling
Enable Flatten nested objects when nested properties should become dot-notation columns such as address.city.
Check the preview and the markup
Use the Preview and HTML switch to compare the rendered table with the generated source, and confirm the row and column counts match your data.
Copy or download the result
Click Copy HTML to take the markup, or download the .html file when you want a page you can open directly. Use the CSV button if you need the same records in a spreadsheet.
[
{ "name": "Alice", "age": 30, "note": "a & b <tag> \"quoted\"" },
{ "name": "Bob", "age": 25, "note": "plain text" }
]<table class="json-table">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>30</td>
<td>a & b <tag> "quoted"</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>plain text</td>
</tr>
</tbody>
</table>How to Convert JSON to an HTML Table
What Is a JSON to HTML Table Converter?
A JSON to HTML table converter takes structured JSON records and writes them out as HTML table markup. The typical input is an array of objects, where each object is one record and each property is one column. The result is static markup you can paste into a web page, a CMS editor, an email template, or a documentation site.
This is useful when you have JSON data from an API, a database export, or a configuration file and you need to show it to people as a table rather than as raw text.
Supported JSON Structure
The supported input is a top-level array of objects:
[{"name":"Alice","age":30},{"name":"Bob","age":25}]Every item in the array has to be an object. An array of strings such as ["a","b"], an array of numbers, or an array of arrays cannot be turned into rows and columns, so it is rejected with an error message. If your document wraps the records in an object such as {"results":[...]}, paste the inner array instead.
How to Convert JSON to an HTML Table
- Enter the JSON: Paste an array of objects into the editor or open a .json file.
- Handle nesting: Enable flattening if nested properties should become dot-notation columns.
- Check the result: Switch between the rendered preview and the HTML source and confirm the row and column counts.
- Copy the markup: Copy the generated table and paste it into your page or editor.
- Or download the file: Save the .html document when you want a page you can open directly, or use the CSV button for a spreadsheet export.
The Generated HTML Structure
The output follows the standard table structure: a thead holding one row of th header cells, and a tbody holding one tr per record with one td per column.
<table class="json-table">
<thead>
<tr>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
</tr>
</tbody>
</table>Using thead, tbody, th, and td keeps the markup semantic: screen readers and other tools can associate header cells with the data cells below them. Presentation is left to CSS, so the table carries a class instead of border, cellpadding, or cellspacing attributes.
HTML Safety and Escaping
JSON values can contain characters that are meaningful in HTML. If a value such as a script tag or an ampersand is inserted into markup without escaping, the browser may interpret it as part of the page instead of as text.
Before a value is written into a th or td element, this tool escapes the five characters that matter in HTML text: &, <, >, the double quote, and the single quote. They become &, <, >, ", and '. The escaped text renders exactly as the original JSON string, without introducing markup.
Escaping the output is necessary but not sufficient in every context. When you place generated markup into a larger application, follow that application's HTML, templating, and content-security practices, especially if the JSON comes from untrusted users.
Using the Output in a Web Page
After copying the markup, paste it into an HTML page, a CMS editor, a documentation system, or an email template. Add your own CSS for borders, spacing, typography, zebra striping, and responsive behavior on small screens.
The generated table is static HTML. It does not include sorting, filtering, pagination, editing, or responsive controls, and it does not load any script or stylesheet of its own. Those behaviors require additional HTML, CSS, or JavaScript in your page.
HTML Table, CSV, and Table Preview
The three outputs solve different problems:
- HTML table: Use it when the data has to be displayed on a page or pasted into an editor that accepts markup.
- CSV: Use it when the records have to continue into Excel, Google Sheets, a database import, or a reporting pipeline.
- Table preview: Use it when you only need to read and sanity-check the records in the browser.
- Raw JSON: Keep it when nested structure, exact data types, or machine-to-machine exchange must be preserved.
Browser-Based Privacy
This tool is designed to parse JSON and generate the markup in your browser rather than uploading the input to a remote conversion service. That is useful for internal datasets and development data, but it is not a guarantee of complete security. Avoid entering credentials, access tokens, personal information, or confidential production data into any web-based tool.