How to convert CSV to HTML table

Click 'Import CSV' in the tool above, paste your comma-separated or tab-separated data, and click Import. The first line is used as table headers (th elements inside thead) and the remaining lines become data rows (td elements inside tbody). After importing, you can edit any cell directly, add or remove rows and columns, toggle headers, and choose a visual style before generating the final HTML code.

// JavaScript — convert CSV string to HTML table
function csvToHtmlTable(csv) {
  const rows = csv.trim().split("\n").map(r => r.split(","));
  const header = rows[0];
  const body = rows.slice(1);
  return `<table>
  <thead><tr>${header.map(h => `<th>${h.trim()}</th>`).join("")}</tr></thead>
  <tbody>${body.map(row =>
    `<tr>${row.map(cell => `<td>${cell.trim()}</td>`).join("")}</tr>`
  ).join("\n  ")}</tbody>
</table>`;
}

const csv = `Name,Age,City
Alice,30,New York
Bob,25,London`;
console.log(csvToHtmlTable(csv));

Handling edge cases in CSV data

The parser handles quoted fields ('"Portland, OR"' stays as one cell), escaped quotes ('""' becomes '"'), and mixed delimiters (commas and tabs). Empty fields are preserved as empty cells. Rows with fewer columns than the header are padded with empty cells. Rows with more columns are truncated to match. Maximum 10 columns are supported to keep tables readable.

Converting CSV to HTML with code

In JavaScript: split the CSV by newlines, split each line by commas, map the first row to th elements wrapped in thead/tr, and map remaining rows to td elements wrapped in tbody/tr. In Python, use the csv module with csv.reader() and build the HTML string with string formatting or an HTML template library like Jinja2. For one-off conversions, this visual tool is faster than writing code.