CodeKitHub
JSON Tools

HTML Table to JSON/CSV Converter

Last updated:

To convert an HTML table to JSON, the header row's cells become your object keys and each following <tr> becomes one object — the reverse conversion builds a <thead>/<tbody> table from that same structure. This tool does the conversion entirely in your browser using the built-in DOMParser, with no data ever uploaded anywhere.


What Is This Tool?

Web pages often present data inside an HTML <table> element — a pricing page, a stats page, a scraped listing — but that markup isn't directly usable in code or a spreadsheet. This tool parses the pasted <table> markup, reads the header row (from <thead>/<th>, or the first <tr> if there's no <thead>), maps each following row's cells to those headers, and outputs a JSON array of objects or a CSV file.

It also works the other way: paste a JSON array of objects or CSV text, and the tool generates a properly structured HTML table with a <thead> for the column headers and a <tbody> for the data rows, ready to paste into a web page or CMS.

Everything runs with the browser's built-in DOMParser — no HTML is sent to a server, so it's safe to use with pasted content that includes internal or sensitive data.

Source: table structure follows the WHATWG HTML Living Standard's table element definition.

Why Use It?

  • Two-way conversion — HTML table to JSON, HTML table to CSV, and JSON/CSV back to clean HTML table markup.
  • Automatic header detection — works with <thead>/<th> markup or a plain first <tr> used as the header row.
  • No copy-pasting into a spreadsheet first — go directly from table markup to structured data.
  • Generates properly escaped HTML output, so special characters like < and & in your data don't break the table.
  • 100% client-side — the HTML you paste (which may come from an internal page or admin panel) never leaves your browser.

How to Use

  1. To convert an HTML table: paste the <table>...</table> markup into the first box, then click "Convert to JSON" or "Convert to CSV".
  2. Review the output, then copy it or click the download link to save the file.
  3. To generate an HTML table: paste a JSON array or CSV text into the second box.
  4. Click "Convert to HTML table" and copy the generated markup into your page or CMS.

Example

Input

<table><tr><th>name</th><th>age</th></tr><tr><td>Alice</td><td>30</td></tr></table>

Output

[{"name":"Alice","age":"30"}]

The first row's cells become the object keys; every following row becomes one array element with values taken as text.

Practical tips

  • Extracting data from a table on a web page: view the page source or inspect the element, copy the <table>...</table> markup, and paste it here instead of manually retyping the data.
  • Publishing an API response as a readable table on a site or in a CMS: paste the JSON array into the second box and copy the generated HTML directly into your page's rich-text or HTML block.
  • If a table uses <div> or CSS grid layout instead of real <table> markup, this tool can't parse it — the source page needs to use actual HTML table tags.

Why header detection matters

A table without a clear header row is ambiguous — every downstream tool needs to know which row defines the column names before it can turn the remaining rows into structured records. This tool resolves that ambiguity the way browsers and most scrapers do: it looks for an explicit <thead> section first, and only falls back to treating the first visible row as the header when no <thead> is present. That keeps the conversion predictable even for hand-written or scraped table markup that skips the more semantic tags.

Frequently Asked Questions

Does it work with tables that don't use <thead>?

Yes. If there's no <thead>, the tool falls back to treating the very first <tr> in the table as the header row.

What if a row has fewer cells than the header row?

Missing cells for that row are left as empty strings in the JSON output or blank in the CSV, so the row structure stays intact instead of causing an error.

Are nested tags inside a cell, like <b> or <a>, preserved?

No — only the visible text content of each cell is extracted. Inline formatting, links, and other nested markup inside a cell are stripped, and only the plain text remains.

Is the pasted HTML sent anywhere?

No. Parsing happens with the browser's built-in DOMParser, entirely on your device — nothing is uploaded to a server.

Can I round-trip a JSON array through this tool back into an HTML table?

Yes — paste the JSON array (or CSV) into the second box and click "Convert to HTML table" to get back valid, properly escaped <table> markup with the same keys as column headers.

Related Tools