Turn JSON data into a clean HTML table in seconds
Paste your JSON array and get a properly formatted HTML table you can drop straight into any webpage, email template, or CMS. No spreadsheet software, no manual markup — just copy in, copy out.
<table> markup. The tool auto-detects column names from your object keys and handles numbers, strings, and nulls correctly. Everything runs in your browser — your data is never uploaded anywhere.
Example input (2 rows):
[{"name":"Alice","age":30},{"name":"Bob","age":25}]<table>
<thead><tr><th>name</th><th>age</th></tr></thead>
<tbody>
<tr><td>Alice</td><td>30</td></tr>
<tr><td>Bob</td><td>25</td></tr>
</tbody>
</table>How to use this JSON to HTML table converter
- Paste your JSON — drop a JSON array (a list starting with
[) into the input box above. - Click Convert — the tool reads your object keys as column headers and maps every value to the right cell.
- Copy or download — grab the
<table>HTML and paste it wherever you need it.
If your JSON has extra whitespace or is minified (squeezed onto one line), the converter handles both fine. You can also paste and validate your JSON first with the JSON Validator if you want to catch errors before converting.
Worked example — product catalog
Say you have a small product list from an API response:
[
{ "product": "Widget A", "price": 9.99, "in_stock": true },
{ "product": "Widget B", "price": 14.50, "in_stock": false },
{ "product": "Widget C", "price": 4.00, "in_stock": true }
]Paste that in and click Convert. The output is a ready-to-use HTML table:
<table>
<thead>
<tr>
<th>product</th>
<th>price</th>
<th>in_stock</th>
</tr>
</thead>
<tbody>
<tr><td>Widget A</td><td>9.99</td><td>true</td></tr>
<tr><td>Widget B</td><td>14.50</td><td>false</td></tr>
<tr><td>Widget C</td><td>4.00</td><td>true</td></tr>
</tbody>
</table>Add a CSS class or a style attribute to the <table> tag to match your site's design. The structure is standard HTML, so it works in every browser and email client that supports tables.
How to convert JSON to an HTML table in code
If you need this in a script or build pipeline, here is the simplest approach in two popular languages.
JavaScript (browser or Node.js)
// JavaScript
function jsonToHtmlTable(jsonArray) {
if (!jsonArray.length) return '';
const headers = Object.keys(jsonArray[0]);
const headerRow = headers.map(h => `<th>${h}</th>`).join('');
const bodyRows = jsonArray.map(row =>
'<tr>' + headers.map(h => `<td>${row[h] ?? ''}</td>`).join('') + '</tr>'
).join('\n');
return `<table><thead><tr>${headerRow}</tr></thead><tbody>\n${bodyRows}\n</tbody></table>`;
}
const data = [{name:'Alice',age:30},{name:'Bob',age:25}];
console.log(jsonToHtmlTable(data));Python
# Python 3
import json
def json_to_html_table(json_array):
if not json_array:
return ''
headers = list(json_array[0].keys())
header_row = ''.join(f'<th>{h}</th>' for h in headers)
body_rows = ''.join(
'<tr>' + ''.join(f"<td>{row.get(h, '')}</td>" for h in headers) + '</tr>'
for row in json_array
)
return f'<table><thead><tr>{header_row}</tr></thead><tbody>{body_rows}</tbody></table>'
with open('data.json') as f:
data = json.load(f)
print(json_to_html_table(data))Both snippets assume a flat array of objects (each object is one row). For nested JSON, flatten it first — see the 'nested JSON' FAQ entry below.
How it works
The converter reads your JSON array and uses the keys of the first object as column headers (<th> elements). Each object in the array becomes a <tr>, and each value becomes a <td>. Numbers stay as numbers; booleans appear as true or false; null becomes an empty cell.
The resulting markup follows the standard HTML table structure — <table>, <thead>, <tbody>, <tr>, <th>, <td> — as defined in the WHATWG HTML Living Standard for tables. All processing happens client-side in JavaScript; nothing leaves your device.
When to use this tool (and when not to)
| Good fit ✅ | Not the right tool ❌ |
|---|---|
| Flat JSON arrays (list of objects) | Deeply nested JSON (flatten it first) |
| Displaying API responses as readable data grids | A single JSON object (not an array) |
| Dropping tables into HTML emails or CMS pages | Interactive sortable tables (add JS sorting after) |
| Quick prototyping or documentation | Very large datasets — paste a sample instead |
Related tools you might need
- Got messy or minified JSON? Run it through the JSON Beautifier first to make it readable.
- Need to shrink your JSON for an API payload? Try the JSON Minifier.
- Getting a parse error? The JSON Validator pinpoints exactly where your JSON breaks.
- Just want to browse and inspect your data? Open it in the JSON Viewer for a collapsible tree view.
- Need a readable, indented copy? JSON Pretty Print formats it with correct spacing in one click.
- Converting to a config format? The JSON to YAML Converter has you covered.
Your data never leaves the browser — the entire conversion happens locally in JavaScript, so sensitive records stay private. Paste your JSON above and get your HTML table instantly.