Convert JSON to HTML Table
online, free & instant

JSON to table in three steps

No account. No upload. No nonsense.

Related JSON tools

Common questions answered

Converting JSON to HTML tables

HTML tables (<table>) are the standard for displaying structured data in web pages. Converting JSON to HTML produces a styled table for embedding in web apps, email templates, or reports. This is useful for admin dashboards, data previews, and any interface displaying JSON records in tabular format.

This tool generates a complete HTML table: <thead> with column headers, <tbody> with data rows, and basic CSS styling. Nested values render as formatted JSON within cells, and null values display as empty cells. The output can be customized with your own CSS framework.

[
  {"name":"Alice","age":30,"city":"Portland"},
  {"name":"Bob","age":25,"city":"Seattle"}
]

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
      <th>city</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>Portland</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>Seattle</td>
    </tr>
  </tbody>
</table>

Get the most out of this tool

• Add CSS classes to the generated table for custom styling — the output uses semantic HTML easy to style with any framework.
• Use generated HTML in email templates — HTML tables are universally supported in email clients.
• For interactive tables, enhance with a library like DataTables for sorting, filtering, and pagination.

How JSON-to-HTML table conversion works

Converting JSON to an HTML table bridges the gap between raw structured data and human-readable presentation. While JSON is the language of APIs and data interchange, HTML tables are the language of browsers and dashboards. The conversion allows developers and data analysts to share structured results without requiring recipients to install additional software or understand JSON syntax.

The algorithm iterates over a JSON array where each element becomes one table row. The union of all keys across all objects forms the column headers. This means heterogeneous arrays — objects with different sets of keys — still produce a coherent table, with empty cells where a given object lacks a particular key. This union approach is more robust than assuming all objects share identical schemas.

Nested objects and arrays inside a table cell present a design choice: flatten them using dot-notation paths, serialize them as JSON strings, or render them as sub-tables. The most practical approach for general use is to display nested structures as compact JSON snippets, preserving data fidelity without requiring recursive table rendering that would produce unwieldy layouts.

HTML table semantics matter for accessibility. Proper use of <thead>, <tbody>, and <th scope="col"> attributes lets screen readers announce column headers for each cell. Generated tables should use these semantic elements rather than relying purely on styling, ensuring the result is accessible to all users and passes automated accessibility audits like WCAG 2.1 AA.

CSS styling for generated tables commonly uses striped rows (tr:nth-child(even)), sticky headers (position: sticky; top: 0), and horizontal scrolling wrappers (overflow-x: auto on a parent div) to handle wide datasets. Bootstrap's table table-striped table-hover classes or Tailwind CSS utility classes are common targets for generated table markup, making it straightforward to copy the HTML directly into an existing project.

For large datasets, rendering thousands of table rows directly in the DOM causes browser performance problems — layout thrashing, slow scrolling, and high memory consumption. Virtual scrolling libraries like TanStack Table (React Table) or AG Grid render only visible rows, maintaining smooth performance even with tens of thousands of records. The HTML table output from this tool is best suited for small-to-medium datasets up to a few hundred rows.

Beyond static HTML, JSON data is also commonly rendered using JavaScript libraries that consume JSON directly: DataTables.js adds sorting, searching, and pagination to any HTML table; AG Grid offers enterprise features like column pinning and cell editing; Chart.js and D3.js transform the same data into bar charts, line graphs, and scatter plots. The HTML table is often a stepping stone — a quick preview before integrating the data into a richer visualization framework.

When developers convert JSON to HTML tables

Pitfalls when converting JSON to HTML tables

• Non-array JSON input: HTML tables require a flat list of rows. If your JSON is a single object rather than an array of objects, you'll need to wrap it in an array first, or use the key-value pairs as rows. Single objects produce one-row tables which rarely convey useful structure.
• Deeply nested data losing meaning: When nested objects are serialized as JSON strings inside table cells, the table becomes harder to read. Consider flattening your JSON with dot-notation first, or restructuring the data before converting to ensure all meaningful fields appear as dedicated columns.
• Ignoring column ordering: JSON objects are technically unordered, so key ordering can vary between rows. A good converter uses the first object's key order and then appends any additional keys from subsequent objects — producing predictable column sequences rather than random orderings.
• Pasting generated HTML directly into CMS editors: Content management systems like WordPress often strip or sanitize table HTML, removing semantic attributes and inline styles. Always verify the rendered output in your target environment, and consider using the CMS's native table tool for simple cases.
• Omitting a scrolling wrapper for wide tables: Tables with many columns overflow their containers on narrow screens. Always wrap generated tables in a div with overflow-x: auto to enable horizontal scrolling on mobile devices and small browser windows.

Additional frequently asked questions