HTML Table Generator

Convert a table to HTML: turn CSV, TSV or data copied from Excel or Google Sheets into clean, semantic HTML table markup with <thead> and <tbody>, and preview the result.

Delimiter:
Copied
Data Input0 B
HTML Output0 B
Live Preview

What the HTML table generator does

It turns delimited text — CSV, TSV or cells copied from a spreadsheet — into a plain HTML <table> element with a <thead> for the header row and a <tbody> for the data, and renders it in the Live Preview pane below. The markup uses only the elements defined for tabular data in the HTML Living Standard, with no classes, inline styles or attributes, so it picks up whatever table styles your site already has.

How to create an HTML table

  1. Paste data into the Data Input pane, or load a CSV or TSV file with File or URL.
  2. Set Delimiter. For cells copied from Excel, Google Sheets, LibreOffice Calc or Numbers, choose Tab.
  3. Tick or untick First row is header.
  4. Click Generate and check the Live Preview.
  5. Use Copy, or Download to save table.html. Clear empties the input, the markup and the preview.

Options explained

Example

Plan,Price,Storage
Free,$0,5 GB
Pro,$8,100 GB

becomes:

<table>
  <thead>
    <tr><th>Plan</th><th>Price</th><th>Storage</th></tr>
  </thead>
  <tbody>
    <tr><td>Free</td><td>$0</td><td>5 GB</td></tr>
    <tr><td>Pro</td><td>$8</td><td>100 GB</td></tr>
  </tbody>
</table>

When a header row matters

Leave First row is header ticked whenever the first line holds column names. Header cells are announced by screen readers as labels for the data beneath them, CSS allows browsers to repeat a <thead> at the top of each printed page when a long table breaks across pages, and CSS can style thead th separately without any extra classes. Untick it only for data that genuinely has no column names, such as a grid of values.

How cell content is handled

Common problems and fixes

SymptomCauseFix
The whole row lands in one cellThe delimiter does not match the data, for example pasted spreadsheet cells with Comma selected.Choose Tab for pasted cells, or the delimiter your file uses.
Error saying a quoted field is never closedA value starts with " but has no closing quote.Add the missing quote on the line given in the message.
Some rows are shorter than the header in the previewThose rows have fewer values in the source.Fill in the missing values; the CSV Formatter reports the first ragged row.
The table looks unstyled on your pageThe markup has no classes or styles by design.Add CSS, as below.

Making the table accessible and styled

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

Frequently asked questions

Is the downloaded file a complete web page?

No. table.html contains only the <table> element, ready to paste into an existing page, template or CMS. Opened directly in a browser it still displays, but without a doctype or styles.

Can I merge cells with colspan or rowspan?

Not in the generator. Every value becomes one cell. Add colspan or rowspan attributes to the generated markup by hand and remove the cells they replace.

Should I use tables for page layout?

No. Tables are for tabular data; use CSS Grid or Flexbox for layout. Layout tables are hard to make responsive and confuse screen readers. HTML email is the usual exception, because many email clients support only limited CSS.

Can I get a Markdown table instead?

Yes, in two steps: generate the HTML here with First row is header ticked, then paste it into HTML to Markdown and click Convert. A table without a header row is left as HTML there, because a Markdown table must have one.

Is my data uploaded?

No. The table is built by JavaScript in your browser, and the preview is rendered on the same page. Nothing you paste is sent to a server; only the URL button makes a request, directly from your browser.

Related tools