HTML table generator

JSON to HTML Table Converter

Convert JSON arrays to clean HTML table code in one click. All property keys become column headers, every array item becomes a row, and you can include optional CSS, a custom class name, and download a ready-to-use HTML file — entirely in your browser.

100% client sideOptional CSSDownload HTML

Class

3 rows × 5 cols

Input/ JSON

385 chars23 lines

Output/ HTML

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>role</th>
      <th>department</th>
      <th>active</th>
      <th>score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Johnson</td>
      <td>Admin</td>
      <td>Engineering</td>
      <td>true</td>
      <td>98.5</td>
    </tr>
    <tr>
      <td>Bob Martinez</td>
      <td>Editor</td>
      <td>Marketing</td>
      <td>true</td>
      <td>87.2</td>
    </tr>
    <tr>
      <td>Charlie Lee</td>
      <td>Viewer</td>
      <td>Design</td>
      <td>false</td>
      <td>72</td>
    </tr>
  </tbody>
</table>

585 chars34 lines

How to convert JSON to an HTML table

Three steps

01

Paste or upload JSON

Add a JSON array of objects to the input panel. Use the sample button to load example user data.

02

Set table options

Choose header row, pretty HTML formatting, optional CSS styles, and an optional CSS class name.

03

Copy or download HTML

The HTML table code updates live. Copy it or download a complete .html file.

Built for web developers

Paste any JSON API response and get production-ready HTML table code in seconds — no manual column mapping, no server needed.

100% client side

No upload, no server. All conversion happens in your browser.

Live conversion

HTML output updates instantly as you type or change options.

Smart headers

Keys from all array items are merged so sparse arrays produce full-width tables.

CSS included

Optional style block adds clean table styling ready to paste into any page.

Custom class

Add a CSS class name to the table element for easy stylesheet targeting.

Download HTML

Export a complete .html file with your table and optional styles.

Frequently asked questions

6 answers

How do I convert JSON to an HTML table?

Paste a JSON array of objects into the input panel. The tool extracts all property keys as table headers and each array item as a row. The HTML output is generated instantly in the right panel.

Can I add CSS styles to the HTML table?

Can I add a custom CSS class to the table?

What JSON structures are supported?

Is my data sent to a server?

How do I use the HTML table in my project?

Generate HTML Tables from JSON Arrays

This tool takes any JSON array of objects and builds a semantic HTML table with thead, tbody, th, and td elements. Keys are collected from all objects so even sparse arrays produce correctly aligned columns. Nested objects are serialised to JSON strings inside the cell. Enable the CSS option to include a basic style block, or add your own class name to target the table with an external stylesheet.