← Back to Home
δΈ­ζ–‡ EN

πŸ“Š JSON to HTML Table

Convert JSON array data to clean, styled HTML table code with one click Β· Nested JSON support Β· Customizable styles

πŸ“₯ JSON Input

πŸ‘οΈ Table Preview

Paste JSON and click "Convert" to generate table

HTML Code 
/* Click "Convert" to generate HTML code */

About JSON to HTML Table Tool

This tool converts JSON array data into clean, well-formatted HTML table code with one click. It automatically detects all fields from JSON objects as table column headers, supports nested JSON expansion, and offers multiple table style options. Perfect for developers and data analysts who need to visualize JSON data as HTML tables.

Use Cases

FAQ

What JSON formats are supported?

This tool supports JSON arrays of objects ([{...}, {...}]) and single JSON objects ({...}). Single objects are displayed as a single-row table. Nested JSON objects and arrays are supported β€” when "Expand nested JSON" is enabled, nested data is displayed with indented formatting.

Is my data uploaded to a server?

No. All data processing happens locally in your browser. No data is uploaded to any server. Feel free to use it even with sensitive data.

How do I customize the table style?

Style options (striped, bordered, hover highlight) are available above the input area. The generated HTML includes complete inline styles β€” just copy and use it directly. You can also modify the CSS in the generated code.

How large JSON datasets can I convert?

There's no hard limit, but we recommend keeping JSON arrays under 1000 entries for optimal browser rendering performance. For very large datasets, split them into smaller batches.

\n'; var previewStyle = ''; if(striped.checked) previewStyle += '.striped tr:nth-child(even) td{background:rgba(148,163,184,.04)}'; if(bordered.checked) previewStyle += '.bordered th,.bordered td{border:1px solid rgba(148,163,184,.15)}'; if(hover.checked) previewStyle += 'tr:hover td{background:rgba(6,182,212,.08)}'; tablePreview.innerHTML = '
' + '' + allKeys.map(function(k){return ''}).join('') + '' + '' + data.map(function(item){ return '' + allKeys.map(function(k){ var val = item && typeof item === 'object' ? item[k] : ''; var display = formatValue(val, expand); return ''; }).join('') + ''; }).join('') + '
' + k + '
' + display + '
'; if(previewStyle) { var styleEl = document.createElement('style'); styleEl.textContent = previewStyle; tablePreview.appendChild(styleEl); } htmlOutput.textContent = style + '\n' + html; cachedFullHtml = fullHtml; showToast('βœ… Converted successfully β€” ' + data.length + ' records'); } var cachedFullHtml = ''; convertBtn.addEventListener('click', convert); clearBtn.addEventListener('click', function(){ jsonInput.value = ''; tablePreview.innerHTML = '

Paste JSON and click "Convert" to generate table

'; htmlOutput.textContent = '/* Click "Convert" to generate HTML code */'; errorMsg.style.display = 'none'; }); sampleBtn.addEventListener('click', function(){ jsonInput.value = sampleData; convert(); }); copyHtml.addEventListener('click', function(){ var ta = document.createElement('textarea'); ta.value = htmlOutput.textContent; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); showToast('βœ… HTML code copied to clipboard'); }catch(e){ showToast('Copy failed, please copy manually'); } document.body.removeChild(ta); }); copyFullHtml.addEventListener('click', function(){ if(!cachedFullHtml){ showToast('Please convert data first'); return; } var ta = document.createElement('textarea'); ta.value = cachedFullHtml; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); showToast('βœ… Full HTML page copied to clipboard'); }catch(e){ showToast('Copy failed, please copy manually'); } document.body.removeChild(ta); }); [striped, bordered, hover, expandNested].forEach(function(cb){ cb.addEventListener('change', function(){ if(jsonInput.value.trim()){ convert(); } }); }); jsonInput.value = sampleData; convert(); })();