CSV to HTML Table
Turn CSV or TSV into clean HTML table markup with thead and tbody, escaped cell content and an optional class. Detects the delimiter. Runs in your browser.
Worked examples
- A small table with a header row
The header row becomes a thead of th cells and everything else goes into a tbody, which is the structure screen readers and CSS expect.
- Characters that must be escaped
Angle brackets, ampersands and quotes in a cell are turned into entities, so pasted data cannot inject markup into your page; the class attribute is added to the table.
- Tab-separated, no header, multi-line cell
Without a header every row is data in a tbody, and a line break inside a quoted cell is kept as a br tag because browsers collapse raw newlines.
What this does
Paste CSV or TSV and get a clean HTML <table> back, with the header row in a <thead> of <th> cells and everything else in a <tbody> of <td> cells. The markup is indented, contains no inline styles, and every cell is escaped, so you can drop it into a page, a CMS block or an email template and style it with your own CSS.
How it works
The CSV is parsed with a proper parser, so quoted fields, embedded delimiters and doubled quotes follow RFC 4180 instead of splitting on every comma. For each cell, the tool then escapes five characters: & becomes &, < becomes <, > becomes >, and both kinds of quote become entities. A cell that contains <script> is therefore rendered as visible text, not executed. That matters whenever the CSV comes from users, a vendor export or a scraped source.
Options:
- Delimiter. Auto-detect (comma, semicolon or tab, counted outside quotes on the first line) or choose one.
- Header row. On by default. Turn it off for data without column names and you get a tbody only, without a thead.
- Class. An optional
classattribute on the table, such astable table-stripedfor Bootstrap ordata-tablefor your own stylesheet. It accepts only letters, digits, hyphens, underscores, colons and spaces, so a class value cannot be used to break out of the attribute.
Edge cases and limits
- Line breaks inside a cell become
<br>, because browsers collapse raw newlines into a single space. - Short rows are padded with empty
<td>cells, and a row longer than the header widens the table, with the extra header cells left empty. HTML tables do not require equal rows, but most CSS and screen readers behave better when they are. - No
<caption>,scopeor ARIA attributes are added. For accessibility on a real page, addscope="col"to the header cells and a caption describing the data. - No number or date formatting. Cell text is copied as it appears in the CSV.
- Output is only the table element. There is no surrounding
<html>, no<style>block and no sorting or filtering behavior. - Input is limited to 2 MB, and conversion runs in your browser.
A subtle point: escaping the content is not the same as sanitizing a whole page. This tool makes the cell text safe, but if you later insert the table into an attribute, a script or a URL, those contexts have their own escaping rules.
When to use it
- Embedding a small data set in a blog post, documentation page or static site without a table plugin.
- Building an HTML email table from a spreadsheet export, where you need plain markup that survives mail clients.
- Producing a quick preview of what an exported CSV contains, to view in a browser.
- Generating fixtures for tests of a table-handling component.
If the target is Markdown rather than HTML, use the CSV to Markdown Table tool, and if you need the reverse direction, the HTML Table to CSV tool reads a pasted table back into rows.
Frequently asked questions
- Is the cell content escaped?
- Yes. The characters & < > " and ' are replaced with HTML entities, so a cell containing <script> shows as text instead of running. That makes the output safe to paste into a page even when the CSV came from someone else.
- Does it add inline styles or a full HTML page?
- No. The output is only the table element, indented with two spaces, with no inline styles. Add your own CSS, or pass a class such as table table-striped to hook into Bootstrap, Tailwind or your own stylesheet.
- What does the header option do?
- When on, the first CSV row becomes a thead with th cells and the rest go in a tbody with td cells. When off, every row is a td row inside a tbody and no thead is written.
- What happens to rows with fewer cells than the header?
- Short rows are padded with empty td cells so every row has the same number of columns. A row with more cells widens the whole table, and the extra header cells are left empty.