How to Convert JSON to HTML Table: Plain, Styled, Bootstrap & Tailwind

JSON is easy for APIs to send, but HTML tables are easier for people to read on a page. Converting JSON to HTML table means turning keys into headers, records into rows, and nested values into something that still makes sense in markup. This guide shows how to convert JSON to an HTML table online, in JavaScript, and with the right choices for plain, styled, Bootstrap, Tailwind, and nested output.

The quickest way: convert JSON to HTML table online

Paste a JSON array of objects into the JSON to HTML Table converter, choose an output preset, and press Convert JSON to HTML table. You can copy the HTML snippet or download a complete .html file.

Use a client-side JSON to HTML table converter when your JSON contains private API responses, customer exports, internal reports, or config data. The conversion happens in your browser, so nothing is uploaded.

Use it when: you need copy-ready table markup for a web page, CMS, docs site, email template, or internal report.

The best input shape: JSON array to HTML table

The cleanest input is a JSON array of objects:

[
  { "id": 1, "name": "Ada", "team": "Core" },
  { "id": 2, "name": "Grace", "team": "Compiler" }
]

The object keys become table headers and each object becomes one row:

<table>
  <thead>
    <tr><th>id</th><th>name</th><th>team</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Ada</td><td>Core</td></tr>
    <tr><td>2</td><td>Grace</td><td>Compiler</td></tr>
  </tbody>
</table>

A single object can become a one-row table. Arrays of strings or numbers can become a simple value column.

Plain HTML vs styled HTML table

There are two common goals:

• Plain HTML table - clean semantic markup with no classes or CSS. Best when your site already has table styles.
• Styled HTML table - a self-contained snippet with CSS included. Best for CMS pages, docs, quick reports, or prototypes.

If you are using a framework, choose the preset that matches it. Bootstrap output uses classes like table table-striped table-bordered; Tailwind output uses utility classes for borders, padding, and text.

Handle nested JSON with sub-tables

Nested JSON is the hard part. A record like this:

{
  "name": "Ada",
  "profile": { "city": "London", "active": true },
  "skills": ["math", "logic"]
}

can become nested HTML sub-tables inside cells, preserving the hierarchy. That is useful when you want readers to see the full structure. For spreadsheet-like output, flatten nested keys into columns such as profile.city and profile.active.

Use nested sub-tables when structure matters. Use flattened columns when scanning and sorting matter.

Escape values safely

A good converter must escape cell values. If a JSON value contains <script> or an angle bracket, it should be rendered as text, not treated as HTML. That means converting characters like <, >, &, and quotes into safe entities.

Never build table HTML by concatenating raw unescaped user data into cells.

Convert JSON to HTML table in JavaScript

For a flat JSON array, this small helper works:

function escapeHtml(value) {
  return String(value ?? "")
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}

function jsonToHtmlTable(rows) {
  const headers = [...new Set(rows.flatMap((row) => Object.keys(row)))];
  const thead = `<thead><tr>${headers.map((h) => `<th>${escapeHtml(h)}</th>`).join("")}</tr></thead>`;
  const tbody = `<tbody>${rows
    .map((row) => `<tr>${headers.map((h) => `<td>${escapeHtml(row[h])}</td>`).join("")}</tr>`)
    .join("")}</tbody>`;
  return `<table>${thead}${tbody}</table>`;
}

For nested objects and arrays, add a recursive renderer or use the online tool so nested values can become sub-tables.

Which method should you use?

For copy-ready output, use the online JSON to HTML Table converter: paste JSON, choose plain/styled/Bootstrap/Tailwind, choose nested sub-tables or flattened columns, then copy the HTML. Use JavaScript when table generation is part of your app. Either way, escape values and decide how nested JSON should appear before you paste the table into a page.

Need a sortable viewer instead? Use JSON to Table. Need spreadsheet exports? See JSON to CSV and JSON to Excel.