CSV to HTML Table

Generate a clean HTML <table> from CSV data, with the first row as headers.

Input

Result

Was this tool helpful?

Thanks for the feedback!

Paste CSV data and this converter writes clean HTML table markup, using the first line as the header row. It is aimed at bloggers, developers and anyone updating a website who has data in a spreadsheet and needs a table in a page, newsletter template or CMS block.

Example input and output

Pasting this CSV:

Product,Price,Notes
"Tea, Assam",120,Loose leaf
Coffee,250,Rich & dark

and clicking Generate HTML produces:

<table>
  <thead>
    <tr><th>Product</th><th>Price</th><th>Notes</th></tr>
  </thead>
  <tbody>
    <tr><td>Tea, Assam</td><td>120</td><td>Loose leaf</td></tr>
    <tr><td>Coffee</td><td>250</td><td>Rich &amp; dark</td></tr>
  </tbody>
</table>

Notice two things: the quoted "Tea, Assam" stayed in one cell even though it contains a comma, and the ampersand was escaped as & so the browser shows it correctly.

How the CSV is parsed

Fields are split on commas. Semicolon- or tab-separated data is not split, so convert those separators to commas first.
Double quotes group a field, a doubled quote ("") inside a quoted field becomes one quote mark, and line breaks inside quotes stay in the cell.
Windows (CRLF) and Unix line endings both work, and blank lines are skipped.
The characters &, <, >, double quote and apostrophe are converted to HTML entities, so text like <b> in your data is displayed rather than turning into bold formatting.
Rows are not padded: a row with fewer values than the header gets fewer cells, and one with more gets extra cells.

Styling the table

The markup carries no classes or inline styles, so it picks up your site's existing table styles. If it looks bare, a few lines of CSS give it borders and spacing:

table { border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 6px 10px; }
th { background: #f5f5f5; text-align: left; }

On phones, wide tables are easier to read when placed in a container with overflow-x: auto so they scroll sideways instead of squeezing the columns. For email newsletters, remember that many email clients ignore style sheets, so styles usually have to be added inline on each cell.

Why the header row matters

Using <th> for the first row lets screen readers announce the column name with each value, and lets search engines and browser reader modes understand the table's structure. Make sure your first CSV line really contains column names; if it does not, add a header line before converting.

Related conversions

For a README or GitHub issue, CSV to Markdown Table gives the Markdown equivalent. To pull data back out of an existing web table, use HTML Table to CSV. The conversion runs in your browser, so pasted data is not sent anywhere.

Frequently asked questions

Does it handle commas inside values?

Yes. Wrap the value in double quotes in your CSV, such as "Tea, Assam", and it stays in a single cell.

Can I use semicolon-separated data?

Not directly, because only commas are treated as separators. Replace the semicolons with commas, or export the file again as comma-separated.

Why does my ampersand look different in the generated code?

Ampersands, angle brackets and quotes are written as HTML entities so the browser treats them as text. The published page still shows a normal ampersand.

Can I add CSS classes to the table?

The tool does not add any, but you can edit the opening table tag after copying and add your own class, or style all tables through your site CSS.

What happens if a row has fewer values than the header?

That row simply gets fewer cells. Add empty values between commas in the CSV if you need every row to have the same number of cells.