JSON to HTML Table

Convert a JSON array of objects into a formatted HTML table.

JSON Input (array of objects)

HTML Output

<table style="border:1px solid #ccc;border-collapse:collapse;">
  <thead>
  <tr>
    <th style="border:1px solid #ccc;padding:8px 12px;background:#f5f5f5;">name</th>
    <th style="border:1px solid #ccc;padding:8px 12px;background:#f5f5f5;">age</th>
    <th style="border:1px solid #ccc;padding:8px 12px;background:#f5f5f5;">city</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td style="border:1px solid #ccc;padding:8px 12px;">Alice</td>
    <td style="border:1px solid #ccc;padding:8px 12px;">30</td>
    <td style="border:1px solid #ccc;padding:8px 12px;">London</td>
  </tr>
  <tr>
    <td style="border:1px solid #ccc;padding:8px 12px;">Bob</td>
    <td style="border:1px solid #ccc;padding:8px 12px;">25</td>
    <td style="border:1px solid #ccc;padding:8px 12px;">Paris</td>
  </tr>
  <tr>
    <td style="border:1px solid #ccc;padding:8px 12px;">Carol</td>
    <td style="border:1px solid #ccc;padding:8px 12px;">35</td>
    <td style="border:1px solid #ccc;padding:8px 12px;">Berlin</td>
  </tr>
  </tbody>
</table>

Bordered tableStriped rows

name	age	city
Alice	30	London
Bob	25	Paris
Carol	35	Berlin

How JSON-to-HTML table conversion works

Paste a JSON array of objects and this tool builds a complete HTML <table> with <thead> and <tbody> sections. Column headers are automatically derived from the object keys, and every cell value is HTML-escaped so the output is safe to use directly. Toggle Bordered to add inline border styles, and Striped rows for alternating row backgrounds — both options produce self-contained HTML that works without any external CSS.

For the reverse direction, use the CSV to HTML Table converter, or JSON Formatter to pretty-print your JSON first.

Private & free — this tool runs entirely in your browser.