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.
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
- Paste data into the Data Input pane, or load a CSV or TSV file with File or URL.
- Set Delimiter. For cells copied from Excel, Google Sheets, LibreOffice Calc or Numbers, choose Tab.
- Tick or untick First row is header.
- Click Generate and check the Live Preview.
- Use Copy, or Download to save
table.html. Clear empties the input, the markup and the preview.
Options explained
- Delimiter — Comma, Semicolon or Tab. Whichever you choose, values wrapped in double quotes may contain that delimiter, line breaks and doubled quotes, following the CSV rules of RFC 4180. That also means a spreadsheet cell copied with a line break in it, which spreadsheets typically wrap in quotes, stays in one table cell when you use Tab.
- First row is header — when ticked, the first row goes into
<thead>as<th>cells. When unticked, there is no<thead>and every row is a<tbody>row of<td>cells. - Generate — builds the markup, indented with two spaces, and shows it in the preview.
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
- Escaping —
&,<and>are converted to entities, so<b>x</b>in your data appears as that text rather than as bold. You cannot put links or formatting in cells through the input; add them to the generated markup afterwards. - Line breaks inside a quoted value are kept in the source, but HTML collapses them to a space when displayed. Replace them with
<br>by hand if you need them to show. - Uneven rows are not padded. A row with fewer values gets fewer cells, and one with more values gets extra cells, which the preview makes easy to spot.
- Blank lines and a leading byte order mark are ignored.
Common problems and fixes
| Symptom | Cause | Fix |
|---|---|---|
| The whole row lands in one cell | The 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 closed | A 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 preview | Those 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 page | The markup has no classes or styles by design. | Add CSS, as below. |
Making the table accessible and styled
- Add a
<caption>straight after<table>to describe the data; screen readers announce it with the table. - Add
scope="col"to the header cells, and use<th scope="row">for row labels in the first column. - Wrap wide tables in a container with
overflow-x: autoso they scroll sideways on narrow screens.
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.