Home/CSV to an HTML table
Convert
Turn CSV into a styled HTML table
This one is not about Markdown. Paste CSV or tab-separated text, get a table in a chosen theme, and take it out as HTML, a PDF or a plain file.
Paste the CSV
Paste text into the source pane and the editor checks its shape before doing anything with it. It needs two or more lines with the same number of separators on each. No line can open like Markdown: a heading mark, a list dash, a blockquote or a fence.
A two-line paste with a single comma or semicolon is treated as prose, since real data rarely stops that short. Tabs are accepted at two lines, because ordinary writing never contains them.
When the shape matches, the editor wraps the paste in a csv fence, or a tsv fence if the first line has tabs. An Undo button then appears beside the source pane.
Commas, semicolons and tabs
Inside a csv fence the delimiter is read from the first line: whichever of comma or semicolon appears more often there is used for the whole block. A tsv fence always splits on tabs, so pasted spreadsheet cells that contain commas of their own still separate correctly.
The first row becomes the table header. A quoted field can hold its own comma, and a doubled quote mark inside those quotes turns into a single literal quote in the rendered cell.
Large files stay usable
The live preview shows the first 2000 data rows, with a note when a fence holds more. The browser is never asked to render an enormous table while the document is still being edited.
Every export keeps every row. Printing, the .html download and the copied HTML all re-render the fence with no cap, so the file you take away matches the source exactly.
Pick a theme for tables
Slate keeps a neutral sans typeface and cool grey lines. It is built for pages with many tables or lists, which makes it a plain default for a CSV export.
Mono sets every cell in IBM Plex Mono on a wider column, so long SKUs, prices and other codes stay on one line instead of wrapping.
Worked example
A twelve-line restock order in a csv fence, with quoted fields for a comma and a doubled quote, plus a small tsv fence for a shipping manifest.
# Warehouse restock order
This is the parts list for the September restock: twelve line items from the
main tool aisle, totalling $3,243.30 before freight.
```csv
Item,SKU,Qty,Unit price (USD),Line total (USD)
Claw hammer 16oz,HDW-1001,24,14.50,348.00
Adjustable wrench 250mm,HDW-1005,30,9.75,292.50
Tape measure 5m,HDW-1009,45,7.20,324.00
"Spirit level, 24"" aluminium",HDW-1013,15,18.40,276.00
Utility knife,HDW-1017,60,3.15,189.00
Safety goggles,HDW-1021,50,4.80,240.00
Cordless drill 18V,HDW-1025,8,62.00,496.00
Drill bit set 13-piece,HDW-1029,20,11.25,225.00
Extension cord 10m,HDW-1033,18,13.60,244.80
Work gloves size L,HDW-1037,75,5.40,405.00
Sandpaper sheets assorted grit,HDW-1041,100,0.85,85.00
"Paint roller, 9"" foam",HDW-1045,40,2.95,118.00
```
Every line was checked against the supplier's invoice before the order was
submitted.
The six heaviest items also went into a separate shipping manifest for the
freight company, which reads tab-separated files rather than comma-separated
ones.
```tsv
Item Weight per unit (kg) Qty Total weight (kg)
Cordless drill 18V 1.80 8 14.40
Extension cord 10m 1.20 18 21.60
Work gloves size L 0.15 75 11.25
Claw hammer 16oz 0.45 24 10.80
Drill bit set 13-piece 0.60 20 12.00
Sandpaper sheets assorted grit 0.05 100 5.00
```
The manifest comes to just over 75 kg, well under the courier's 100 kg limit
for a single pallet.
Warehouse restock order
This is the parts list for the September restock: twelve line items from the
main tool aisle, totalling $3,243.30 before freight.
Every line was checked against the supplier's invoice before the order was
submitted.
The six heaviest items also went into a separate shipping manifest for the
freight company, which reads tab-separated files rather than comma-separated
ones.
The manifest comes to just over 75 kg, well under the courier's 100 kg limit
for a single pallet.
Rendered in the Slate theme. Open it in the editor to change the theme or the text.
Getting the table out
- Copy styled HTML puts the table on the clipboard with its styles inlined, so it keeps its look pasted into an email or a CMS editor.
- Download .html saves one standalone file, the theme's CSS and fonts bundled in.
- Print or save as PDF opens the browser's own print dialog, where choosing "Save as PDF" turns the table into a page you can hand out on paper.
- Download .md saves the source exactly as written, fence and all, for a file you can paste back in later.
Not a Markdown conversion
This is the one converter here that has nothing to do with Markdown syntax. The whole document can be a single csv fence, with no heading or prose around it, and the table renders the same either way.
The H1 and the two sentences around the table in the example below are there for context only. Delete them and the csv fence still turns into a table on its own.
Questions
What happens with a semicolon-separated file?
A csv fence reads its delimiter from the first line and picks whichever of comma or semicolon appears more often, so a semicolon file needs no extra step.
Does a cell that already contains a comma break the table?
No. Wrap that field in double quotes in the source, and the comma stays inside the cell. A doubled quote mark inside those quotes becomes one literal quote in the output.
What if my CSV has more than 2000 rows?
The live preview renders the first 2000 data rows and shows how many more there are. Printing, the .html download and the copied HTML all keep every row.
Can I paste tab-separated text copied from a spreadsheet?
Yes. The editor detects tabs on paste and wraps the text in a tsv fence instead of csv, so commas inside a cell are never mistaken for separators.