JSON to HTML Table

What Is the JSON to HTML Table Generator?

The JSON to HTML Table Generator converts a JSON array of objects into a formatted HTML <table> element. Each object in the array becomes one table row (<tr>), and each key in the objects becomes a column header (<th>) in the table head. The tool produces clean, standards-compliant HTML that can be embedded directly into a web page, pasted into a content management system, dropped into an email template, or copied into a static site generator's template.

Displaying structured data from an API or database in a readable tabular format is one of the most common front-end development tasks. When the data arrives as JSON, the standard approach in a JavaScript application is to render the table dynamically using a framework. However, there are many contexts where you need a static HTML table rather than a dynamically rendered component: CMS platforms like WordPress or Webflow that accept raw HTML, email marketing tools where JavaScript is not permitted, reports generated as HTML documents, or simple static pages where adding a JavaScript framework is disproportionate overhead.

The tool supports three output styles. Plain produces a minimal HTML table with no inline styles — suitable for use in any context where your own CSS stylesheet handles table formatting. Styled adds inline CSS for borders, padding, and alternating row colours, producing a readable table without requiring any external CSS. Bootstrap adds Bootstrap 5 table classes (table, table-striped, table-hover, table-bordered) for use in projects already using the Bootstrap framework.

This tool is used by web developers generating data display prototypes, content managers embedding data tables in CMS pages, email developers building HTML email tables from API data, and analysts who need to share tabular data as a formatted HTML document.

How to Use the JSON to HTML Table Generator

1. Paste your JSON array. The input must be a JSON array of objects — for example [{"name": "Alice", "score": 95}, {"name": "Bob", "score": 87}]. All objects should share the same keys; if some objects have extra keys that others lack, those columns will show empty cells for the rows where the key is absent.
2. Choose your output style. Select Plain for a class-free table that inherits your existing CSS, Styled for a self-contained table with inline styles ready to use anywhere, or Bootstrap for a table using Bootstrap 5 class names for use within a Bootstrap-based project.
3. Preview the table. The rendered table preview appears below the output code, showing you exactly what the table will look like with the chosen styling before you copy it.
4. Copy the HTML. Click Copy to copy the generated HTML to your clipboard. Paste it directly into your CMS, email editor, HTML file, or code editor.
5. Embed and customise. For Plain tables, add your own CSS class to the <table> element to apply your stylesheet's table rules. For Styled tables, the inline CSS can be edited directly to match your brand colours. For Bootstrap tables, add or remove Bootstrap modifier classes such as table-dark, table-sm, or table-responsive to suit your layout.

Why Use This Tool

Manually writing HTML tables from JSON data is repetitive and error-prone. For a 10-column, 50-row dataset, that is 500 table cells to write, all with correct value escaping for HTML special characters. Even small datasets contain enough boilerplate (<table>, <thead>, <tbody>, <tr>, <th>, <td>) to make manual authoring tedious. This tool eliminates all of it.

Content managers and CMS users

WordPress, Webflow, Squarespace, and most CMS platforms have an HTML block or a "raw HTML" embed feature that accepts static HTML. A content manager who receives data from a colleague as a JSON export can convert it to a formatted table and paste the HTML into the CMS without needing a developer. The Styled output mode is specifically designed for this use case — it produces a self-contained, readable table that looks professional without requiring any additional CSS.

Email developers building HTML emails

HTML email clients do not support external CSS files and have limited support for internal stylesheets. Email tables must use inline CSS for styling — which is exactly what the Styled output mode of this tool produces. A developer building an order summary email, a performance report email, or a data digest can convert their JSON payload to a styled HTML table and embed it directly in the email template.

Front-end developers prototyping data displays

During rapid prototyping, a front-end developer who needs to show stakeholders what a data table will look like can convert a sample API response to HTML in seconds, paste it into a prototype page, and present it without writing any JavaScript. Once the prototype is approved, the developer replaces the static table with a dynamically rendered component — but the static table proves the layout concept immediately.

Developers generating reports as HTML documents

Many reporting pipelines generate HTML documents that are saved to disk, emailed as attachments, or converted to PDF. When the report data is available as JSON, converting it to an HTML table is the first step. The Plain output mode is suited for this use case — it produces clean, semantic HTML that pairs with the report's existing stylesheet without adding conflicting inline styles.

Real-World Use Cases

Content manager embedding a product comparison table in a CMS

A content manager at a consumer electronics retailer needs to add a product comparison table to a category page in their Shopify store. The product data — model name, price, battery life, screen size, and weight — is available as a JSON export from their PIM (product information management) system. Rather than manually typing the table in Shopify's HTML editor, the content manager pastes the JSON into this tool, selects the Styled output, and copies the generated HTML into the Custom HTML block on the Shopify page. The table displays correctly with alternating row shading and bordered cells, matching the store's aesthetic, in under five minutes.

Developer building HTML email order summaries

A developer at an e-commerce company maintains an automated order confirmation email system. Each order confirmation includes a line item table showing product name, quantity, unit price, and subtotal. The order data is returned as a JSON array by the order service. The developer uses this tool during development to verify that their JSON-to-HTML-table conversion logic produces the correct HTML structure, using the Styled output as a reference for the expected inline CSS approach. The tool also helps non-developer team members preview the table layout during email template review without running the application.

Data analyst sharing API results with a non-technical stakeholder

A data analyst retrieves query results from an internal analytics API as a JSON array. The stakeholder who needs to see the results — a product manager with no SQL access — wants a readable table in an email, not a JSON file attachment. The analyst converts the JSON to an HTML table using the Styled output, copies it into an email, and sends it. The product manager can read the data immediately without needing any tool or technical knowledge. The styled output renders correctly in Gmail, Outlook, and Apple Mail.

Front-end developer prototyping a leaderboard component

A front-end developer is prototyping a leaderboard feature for a gaming application. They have a JSON fixture of 20 player records with rank, username, score, and level. Using this tool with Bootstrap styling, they generate a table-striped table-hover table-bordered HTML table and paste it into a Bootstrap prototype page alongside the application header and sidebar. The prototype is shared with stakeholders in a Figma presentation within an hour of starting work, without writing any React components or JavaScript rendering logic.

Common Mistakes and Troubleshooting

Pasting a JSON object instead of a JSON array

The tool requires a JSON array of objects. A single JSON object (starting with {) cannot be converted to a table with multiple rows — it would produce a single-row table if wrapped in an array, or an error if pasted directly. Wrap single objects in array syntax: [{...your object...}]. If you have a JSON object whose values are arrays, extract the relevant array first before converting.

Missing table headers from inconsistent keys

The tool derives column headers from the union of all keys found across all objects in the array. If the first object has different keys than subsequent objects, unexpected columns may appear. For predictable output, ensure all objects in your JSON array have the same keys — add null for any field not applicable to a given row rather than omitting the key entirely.

HTML special characters not rendering correctly

If your JSON values contain HTML special characters — angle brackets (< >), ampersands (&), or quotation marks (") — the tool escapes them as HTML entities (<, >, &) in the table cell content. This is correct and prevents the characters from breaking the HTML structure. The table will display the original characters visually. If you see entity codes in your table cells, your rendering environment may be double-escaping the content — check whether the HTML is being interpreted or displayed as raw text.

Nested objects appearing as [object Object] in cells

If a JSON value is itself an object or array rather than a primitive, some converters display it as [object Object] in the cell. This tool serialises nested values as formatted JSON strings in the cell. If this is not what you want, flatten the nested object before converting, or pre-process your JSON to extract only the scalar fields you need in the table.

Bootstrap classes not applying any styles

The Bootstrap output mode adds Bootstrap class names but does not embed the Bootstrap CSS. Your page must already include the Bootstrap 5 CSS via a CDN link or local file for the classes to apply. If the table looks unstyled after using Bootstrap output mode, add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> to your page's <head>.