JSON to HTML Table Converter

When to Use an HTML Table for JSON Data

JSON arrays are a natural fit for tabular display whenever your data consists of a list of similar records. An HTML table is the right output choice in several common scenarios:

• Reports and dashboards - Display sales figures, user lists, or analytics summaries in a structured grid.
• Email newsletters - HTML tables remain the most reliable layout method across all major email clients, including Outlook, Gmail, and Apple Mail.
• CMS content - Paste the generated table directly into WordPress, Webflow, or any rich text editor to present structured data.
• API response previews - Quickly render a REST API response in a human-readable table format during development.
• Spreadsheet imports - Some tools accept HTML table markup as an import format, making this converter a useful bridge.

If your JSON is a deeply nested object rather than an array, consider using the JSON Formatter or JSON to CSV tool first to flatten the data into a list structure before converting to a table.

How a JSON Array Maps to Table Rows

The conversion follows a straightforward set of rules. Understanding these rules helps you structure your input JSON correctly and predict what the output table will look like.

Given this input JSON array:

[
  { "id": 1, "product": "Widget A", "price": 9.99, "stock": 120 },
  { "id": 2, "product": "Widget B", "price": 14.99, "stock": 45 },
  { "id": 3, "product": "Widget C", "price": 4.99, "stock": 300 }
]

The converter produces an HTML table where:

• The unique keys from the first object (id, product, price, stock) become <th> column headers inside a <thead> row.
• Each object in the array becomes a <tr> row inside <tbody>.
• Each value is placed in a corresponding <td> cell, matched to its column by key name.
• Missing values in a row (when an object lacks a key present in other objects) are rendered as empty cells.
• Nested objects or arrays are serialized to a JSON string and placed inside the cell as plain text.

Styling Your Generated HTML Table

The raw HTML table output is unstyled by default, which makes it easy to integrate into any existing design system. Here are practical CSS patterns for the most common use cases:

Basic bordered table

table { width: 100%; border-collapse: collapse; font-family: sans-serif; }
th, td { padding: 0.75rem 1rem; border: 1px solid #e2e8f0; text-align: left; }
th { background: #f1f5f9; font-weight: 600; }
tr:nth-child(even) { background: #f8fafc; }

Email-safe inline styles

For HTML email clients, add inline styles directly on the elements since external stylesheets are blocked:

<table style="width:100%;border-collapse:collapse;font-family:Arial,sans-serif;">
  <thead>
    <tr>
      <th style="padding:8px 12px;background:#3b82f6;color:#fff;text-align:left;">Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding:8px 12px;border-bottom:1px solid #e2e8f0;">Value</td>
    </tr>
  </tbody>
</table>

Responsive table wrapper

On mobile screens, wide tables overflow their container. Wrap the table in a scrollable div to handle this gracefully:

<div style="overflow-x:auto;">
  <!-- paste generated table here -->
</div>

Common Use Cases

Data reports and internal dashboards

Backend APIs frequently return JSON arrays for report data - user lists, transaction histories, inventory levels. Pasting that response into this converter gives you a formatted HTML table you can drop straight into an internal report template, a Confluence page, or a static HTML report file. No JavaScript framework or library is needed on the display side.

HTML email campaigns

Email marketing platforms like Mailchimp, SendGrid, and Campaign Monitor accept raw HTML. If you have a JSON dataset of product listings, event schedules, or pricing tiers, convert it to an HTML table, apply inline styles, and paste it directly into your email template. Tables render consistently across Outlook (which ignores most CSS), Gmail, and webmail clients.

Documentation and API references

API documentation often includes example response tables. Convert your sample JSON responses to HTML tables and embed them in your docs site, README, or wiki. This is faster than manually building the table markup and reduces the chance of copy-paste errors in the column names.

Spreadsheet and no-code tools

Tools like Notion, Coda, and Airtable can import HTML table content via their rich text editors. If you have JSON data from an API that you want to view in a spreadsheet-style layout without setting up a database, the JSON to HTML table converter provides a quick bridge.

Frequently Asked Questions

What JSON structure works best for HTML table conversion?

An array of objects with consistent keys works best. Each object becomes a table row and each unique key becomes a column header. For example: [{"name":"Alice","age":30},{"name":"Bob","age":25}] produces a clean two-column table with Name and Age headers. If your keys vary between objects, the converter uses the union of all keys found across all objects as the column set.

Can I convert nested JSON to an HTML table?

Deeply nested JSON does not map directly to a flat table. You should first flatten the JSON by extracting the fields you need into a simple array of objects. The tool handles one level of nesting by serializing nested values as JSON strings in cells, so you can still see the data, but it will not be split into sub-columns. Use the JSON formatter tool to explore and reshape your data first if needed.

How do I style the generated HTML table?

The generated table includes a basic class attribute you can target with CSS. Set border-collapse: collapse on the table element and add padding, border, and background-color on th and td elements. Use tr:nth-child(even) for zebra striping.

Can I use this for email templates?

Yes. HTML tables are the standard layout method for email clients like Outlook and Gmail. Paste the generated table into your email HTML and apply inline styles, since most email clients do not support external stylesheets. Use inline style attributes on every element rather than class-based CSS for maximum compatibility across email clients.