HTML Table Generator from CSV or JSON

To make an HTML table, paste CSV or JSON into the Input editor or open a .csv or .json file. With Live generate on, the table code appears as you type; otherwise select Generate table. The first CSV row or the JSON keys become the header row. Select Copy HTML or Download HTML to use the markup.

How to use the HTML table generator

1. Add your data. Paste CSV or JSON into the Input editor, or select Choose file to open a .csv, .json or .txt file. JSON sample and CSV sample show the expected formats.
2. Check detection. Input Format and CSV Delimiter both start on Auto detect. Set them by hand if your file uses an unusual layout.
3. Set the markup. Change Table class (default toolzy-table), add a Table ID, and choose whether to escape cell HTML and include thead and tbody. Without thead, the header cells are written as the first row of the table.
4. Copy the code. Review the Rendered Table Preview, then select Copy HTML or Download HTML.

CSV to HTML table: how the data is read

Each line of the CSV becomes a table row. With Header source on Auto or First row or keys, the first line becomes the header cells and every later line becomes a data row. Choose Numbered columns for CSV with no header line; the columns are then labelled Column 1, Column 2 and so on, and every line is treated as data. Header source works the same way for JSON arrays of arrays.

The delimiter is detected from the first line by counting commas, semicolons, tabs and pipes and picking the most common one. Spreadsheets saved in many European locales use semicolons, so auto detection matters there. Values wrapped in double quotes can contain the delimiter, and a doubled quote ("") inside them becomes a single quote, as in the RFC 4180 CSV format. Spaces around each value are trimmed while Trim input is ticked. A quoted value can also contain line breaks; it stays one cell. Empty values become empty cells, and blank lines are skipped.

JSON to HTML table: supported shapes

If objects have different keys, missing values become empty cells. Nested objects and arrays inside a cell are written out as JSON text, for example ["a","b"]. Flatten deeply nested data first, or convert it with the JSON to CSV converter and check the columns there. Invalid JSON stops generation, so if detection fails, validate it in the JSON formatter.

What the generated table HTML looks like

The CSV Product,Price followed by two data rows produces this, indented with two spaces:

<table class="toolzy-table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Starter Plan</td>
      <td>$9</td>
    </tr>
  </tbody>
</table>

The output has no inline styles, so it picks up your site's CSS. Zebra preview and Compact preview only change the preview on this page. A starting point for your stylesheet:

.toolzy-table { border-collapse: collapse; width: 100%; }
.toolzy-table th, .toolzy-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.toolzy-table tbody tr:nth-child(even) { background: #f6f7f9; }

Accessible and safe table markup

Screen readers use header cells to announce which column a value belongs to. The generator writes plain <th> cells, so for data tables add scope="col" to each one and a <caption> that describes the table. Both take a minute with find and replace.

Escape cell HTML is on by default. It turns <, >, & and quotes in your data into entities, so a value like <b> shows as text. Turn it off only when your cells deliberately contain markup, such as links, and the data comes from a source you trust. Unescaped data from users or third parties can inject scripts into your page.

Frequently asked questions

Updated 11 October 2026Reviewed by the ToolzyLab teamHow we test our tools