Table to HTML Converter

Table to HTML from whatever format you have

Data for a web page rarely arrives in one format. One day it is a CSV export, the next a JSON response from an API or a Markdown table from a README. This table to HTML converter accepts all of them in the same box, works out the format on its own and produces the same clean result: a <table> with a <thead> header row and a <tbody>, indented and ready to paste into a template.

Supported input formats

The format is detected from the text itself, and the status bar tells you what was recognized, for example Converted JSON → HTML table (2 records).

• CSV – comma, semicolon or pipe separated, with quoted fields.
• TSV – any text whose first line contains a tab, such as cells copied from a spreadsheet.
• JSON – an array of objects, or an object that wraps one. Nested fields become dotted columns such as owner.name.
• Markdown – a pipe table; the separator row is dropped and escaped pipes are restored.
• HTML – an existing table, which is rebuilt as clean markup. Cells spanning several columns or rows are expanded into ordinary cells.
• YAML – a list of mappings is also recognized.

Example: an API response to a class-based table

[
  {"endpoint": "/users", "method": "GET", "auth": true},
  {"endpoint": "/users/{id}", "method": "DELETE", "auth": true}
]

With Styling set to No CSS and CSS class set to table table-striped, the classes Bootstrap uses for tables:

<table class="table table-striped">
  <thead>
    <tr>
      <th>endpoint</th>
      <th>method</th>
      <th>auth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>/users</td>
      <td>GET</td>
      <td>true</td>
    </tr>
    <tr>
      <td>/users/{id}</td>
      <td>DELETE</td>
      <td>true</td>
    </tr>
  </tbody>
</table>

No inline styles and no style block are added, so the table picks up your framework or site CSS the moment you paste it.

Options explained

• CSS class – written into the class attribute of the table. Several classes separated by spaces are fine. Leave it empty for a bare <table>.
• Styling – Bordered (the default) adds a <style> block with collapsed 1px borders, padding and a hover highlight; Striped rows also shades even rows; No CSS outputs markup only.
• Header colour – the background of the header cells when a style is used, with white text. Enter a hex value such as #0f766e; anything else falls back to the default blue.
• First row is header – for CSV, TSV and HTML input. Untick it for data without column names; the output then has only a <tbody>.

The built-in CSS uses element selectors (table, th, td). If the page contains other tables, prefix the rules with your class, for example .pricing th, so they only affect this one.

Details worth knowing

• Escaping. Every cell is HTML-escaped. A value like <b> or AT&T appears as text and cannot break the layout.
• Number formatting. Numeric cells are read as numbers, so 9.90 is written as 9.9 and 49.00 as 49. When the exact text matters, as with prices, use the Tableizer, which copies every cell verbatim.
• Missing values. When JSON records have different keys, the header is the union of all keys and missing values are left as empty cells.
• Layout. The result is always a single flat table. For nested lists and sub-tables, convert a CSV with CSV to HTML or JSON with JSON to HTML.

Cleaning up legacy HTML tables

Pasting an old table back in is a quick way to strip years of accumulated markup. Only the text of each cell is kept, so inline style and width attributes, bgcolor, <font> tags and bold formatting disappear, and runs of whitespace collapse to single spaces. Be aware that links inside cells are reduced to their text as well, so re-add any <a> elements you need afterwards.

When to use this tool

Choose this converter when the table is going into a site you control: a documentation page, a component template, a static site or an admin screen with its own CSS. It gives you predictable, framework-friendly markup. To build a table from scratch by typing into cells, try the HTML table generator instead.

Privacy

Detection, parsing and HTML generation all happen in your browser, and the data you paste is not stored. Load URL and Save & Share are the only features that talk to our server.