HTML Table to JSON

About this tool

Some of the most useful data on the web lives inside HTML tables on Wikipedia pages or government portals — with no API to fetch it. HTML Table to JSON lets you paste raw HTML markup and walk away with a structured JSON array, no BeautifulSoup or Python required. Data scrapers, developers converting legacy HTML reports, and journalists pulling numbers all use this to skip parsing boilerplate. The tool uses the cells of the table's first row — th or td — as JSON keys and turns every following row into an object. Nested tags like a, span, and strong are stripped to inner text — exactly what you want for Wikipedia tables full of citation links. When the HTML contains several tables, a dropdown lets you pick which one to convert. Colspan and rowspan cells are expanded so every row has a consistent shape. All values come out as strings, exactly as they appear in the cells.

Why use it

• First Row Becomes Keys: The cells of the table's first row are trimmed and used as JSON keys, and empty header cells get col1, col2 style names, so output is usable without renaming fields manually.

• Handles Nested Tags: Strips a, span, strong, em, and other inline wrappers inside cells and keeps only the inner text. Wikipedia tables are full of citation superscripts and anchor links — the extractor ignores the markup and preserves only the data.

• Multiple Tables in One Paste: If your HTML contains several table elements, a dropdown lists each one with its row count so you can pick the one you need without isolating it by hand.

• Colspan and Rowspan Aware: Merged cells using colspan and rowspan are expanded so each output row has a consistent shape with the same set of keys. No missing fields and no index misalignment from spanning cells.

• Exact Cell Text: Every value is kept as the string shown in the cell, so figures like 1,234 or $19.99 are reproduced exactly as published.

• Pure In-Browser DOM Parse: Uses the browser's built-in DOMParser to process the HTML entirely locally. Your scraped HTML — which may contain authentication tokens, internal links, or confidential data — never makes a network request.

How to use

1. Paste raw HTML containing one or more table elements into the HTML table box
2. If the HTML contains more than one table, choose it from the Table dropdown (Table 1, Table 2 …)
3. Read the JSON array that updates as you type — the first row's cells become the keys
4. Click Copy to put the JSON on your clipboard

When it helps

• Extracting a statistics table from a Wikipedia article into JSON for use in a data visualisation or analysis script
• Converting a legacy HTML report from an internal tool into structured JSON fixtures for a new API
• Pulling tabular data from a government portal or financial disclosure page without writing a scraper
• Quickly testing the shape of a scraped table before writing a full BeautifulSoup or Playwright extraction script
• Converting an HTML email or newsletter table into JSON for archival or analysis purposes
• Extracting a comparison table from a competitor's documentation page for analysis

Examples

<table>
<tr><th>Name</th><th>Role</th></tr>
<tr><td>Ada</td><td>Engineer</td></tr>
<tr><td>Alan</td><td>Researcher</td></tr>
</table>

[
  {
    "Name": "Ada",
    "Role": "Engineer"
  },
  {
    "Name": "Alan",
    "Role": "Researcher"
  }
]

<table>
<tr><th>City</th><th>Population</th></tr>
<tr><td><a href="/wiki/Tokyo">Tokyo</a></td><td>13,960,000</td></tr>
<tr><td><a href="/wiki/Delhi">Delhi</a></td><td>16,787,941</td></tr>
</table>

[
  {
    "City": "Tokyo",
    "Population": "13,960,000"
  },
  {
    "City": "Delhi",
    "Population": "16,787,941"
  }
]

<table>
<tr><th>Q1</th><th>Q2</th><th>Q3</th></tr>
<tr><td colspan="2">$10k</td><td>$5k</td></tr>
</table>

[
  {
    "Q1": "$10k",
    "Q2": "$10k",
    "Q3": "$5k"
  }
]

Tips

• To grab a table from a live site, open DevTools, right-click the table element, choose Copy → Copy outerHTML, and paste it here.
• Rows from a tfoot (totals or summaries) are converted like any other row — delete them from the pasted HTML if you do not want them.
• Values stay strings; strip currency symbols and thousands separators in your own code if you need numbers.
• Wikipedia tables often have superscript citation numbers like [1] inside cells — strip these with a quick find-replace after extraction if you do not need them.
• If your table has several header rows, only the first row becomes keys and the others are converted as data — delete the extra header rows first.

Frequently Asked Questions

Glossary

DOM tree

The in-memory hierarchical structure that a browser builds from HTML markup. Each element, attribute, and text node becomes a node in the tree, allowing JavaScript to traverse and extract table data programmatically.

Header row (<th>)

A table row using th elements instead of td. Browsers render th cells as bold and centred by default; this tool uses the first row of the table as the source of JSON keys whether it uses th or td.

Colspan / Rowspan

HTML attributes that cause a single table cell to span multiple columns (colspan) or multiple rows (rowspan). Extractors must expand these merged cells to ensure every logical row has a consistent and complete set of fields.

Inner text

The plain text content of an HTML element after stripping all child tags. For a cell like <td><a href="...">Ada</a></td>, the inner text is simply Ada.

Nested anchor

A link tag (a element) placed inside a table cell, common in Wikipedia and documentation tables where cell text links to a related article. Extractors strip the anchor but preserve its inner text.

Table picker

In this tool, the dropdown that appears when a paste contains more than one table element, listing Table 1, Table 2 and so on with their row counts.