JSON to HTML Table Free
Convert a JSON array of objects to a styled HTML table instantly. Paste JSON, preview the rendered table, choose a style theme, copy the HTML code. Paste directly into your webpage or email template. Runs entirely in your browser.
JSON Input
Rendered Preview
HTML Output
Pro — custom CSS classes, pagination, search filter, export as image, API
API access · Priority queue · Team workspace
How It Works
Paste Your JSON
Paste a JSON array of objects into the input. Click Sample JSON to load a country data table with name, capital, population, and continent columns. The converter auto-extracts all unique object keys as table headers, so even sparse JSON arrays with inconsistent keys produce a complete, aligned table with empty cells where values are absent.
Choose Style & Options
Select a style theme — Clean for minimal borders, Striped for alternating row colors, Dark for a dark background table, or Blue for a blue header style. Toggle inline CSS to include all styles in the HTML tag attributes (no external stylesheet needed). Optionally add a table caption or make headers sortable with a small JavaScript snippet.
Preview & Copy HTML
The rendered table appears in a live preview panel above the HTML code. Verify the layout, column names, and styling before copying. Click Copy HTML to copy the complete table markup to your clipboard — paste it directly into any HTML file, CMS editor, email template, Notion page, or documentation tool that accepts raw HTML.
JSON to HTML Table Features
Multiple style themes, live preview, and self-contained HTML output
4 Style Themes
Choose from Clean (minimal single-pixel borders with no background colors — suitable for plain documents), Striped (alternating light gray rows for readability in data-dense tables), Dark (dark background with light text — ideal for dark-mode emails or documentation), and Blue (classic corporate blue header with white text, widely expected in business reports).
Live Rendered Preview
The table renders in a sandboxed iframe so you can see exactly how it will appear in a browser before copying. The preview is live — it updates immediately when you change the theme or options and click Generate Table. This eliminates the back-and-forth of pasting HTML into a separate editor to check the visual output.
Self-Contained HTML
With inline CSS enabled, all styling is embedded directly in the table's style attributes — no external stylesheet is required. Paste the output into any HTML page, email template, Markdown file (GitHub renders HTML tables), Notion, Confluence, or any CMS that accepts raw HTML. The table renders consistently in any environment without requiring linked CSS files.
Sortable Headers
The sortable option includes a compact inline JavaScript snippet that makes all column headers clickable — clicking a header sorts the table by that column, clicking again reverses the sort. The sort handles strings, numbers, and dates automatically. Useful for tables in static HTML pages, documentation sites, or email reports where you want interactive sorting without a full JavaScript library.
Full Key Scanning
Column headers are extracted by scanning all objects in the array — not just the first row. This handles sparse JSON from APIs where different rows have different fields. All unique keys across all rows become columns. Objects missing a key get an empty cell for that column rather than a structural misalignment, ensuring the table is always well-formed and readable regardless of data consistency.
100% Private
All table generation runs in your browser using JavaScript. Your JSON data never touches a server — no upload, no logging, no transmission. The HTML is built in-memory and shown directly in the output field. Completely safe for JSON arrays containing personal records, internal business data, financial figures, or any structured data that must remain confidential.
Free vs Pro
| Feature | Free | Pro |
|---|---|---|
| JSON input size | Unlimited | Unlimited |
| Style themes | 4 themes | Custom CSS |
| Pagination | — | |
| Search & filter input | — | |
| Export as PNG image | — | |
| REST API access | — |
Frequently Asked Questions
Email clients require inline styles for table formatting to render correctly — most email clients strip external stylesheets and style blocks. Enable "Include inline CSS" to ensure all styles are embedded directly in the HTML tags. For Gmail specifically, use Insert → HTML (via a browser extension like "Insert HTML" for Chrome) or paste into a Google Doc first then copy from there. Outlook supports inline styles natively.
Nested objects and arrays are serialized to a JSON string and placed in the cell. For example, a tags field containing ["admin","editor"] appears in the cell as that JSON string. For cleaner output with nested data, use the JSON Flatten tool first to expand nested keys into their own columns, then generate the HTML table from the flattened result.
No — the sortable option embeds a small self-contained inline JavaScript snippet directly inside the HTML output. No external libraries (like jQuery or DataTables) are needed. The sort script is fewer than 20 lines and handles string, numeric, and basic date sorting automatically based on the cell content type. It works in any modern browser.
Confluence supports HTML tables natively in its HTML macro — paste the output directly into an HTML macro block. Notion has limited HTML support: it cannot render raw HTML table tags, but Notion tables created manually are supported. For Notion, use the JSON to CSV tool instead and import the CSV data, or paste it as a database table. Alternatively, take a screenshot of the preview for visual inclusion in Notion.
GitHub's Markdown renderer does support basic HTML table syntax — you can paste a <table> block directly into a README.md or wiki page and it will render correctly. However, GitHub strips most style attributes for security, so the rendered table will use GitHub's default table styling rather than your chosen theme. For styled tables in GitHub, Markdown pipe table syntax is more reliable.
No — the entire conversion runs in your browser. Your JSON is parsed locally and the HTML is generated in JavaScript memory. The preview iframe is populated via a Blob URL that stays within the browser tab. No data is transmitted to any server at any point. This makes it safe for JSON containing internal business data, user records, financial tables, or any data that should not leave your device.