HTML Table Generator
Turn rows of tabular text into accessible HTML table markup. Your work stays on this device whenever possible.
How to use HTML Table Generator
- Paste rows into "Paste CSV, TSV, or comma-separated rows"; every line becomes one table row, and the delimiter (comma, tab, semicolon or pipe) is auto-detected across the whole paste, or chosen manually.
- Type a label in "Table caption (optional)" to emit a caption element, then pick "Clean bordered", "Zebra striped" or "Minimalist modern" under "Table styling preset".
- Leave "First row is header" ticked to wrap line one in a thead of scope="col" cells, or untick it when every line is data.
- Tick "First column is row header (scope="row")" when the leftmost cell names each record, such as a product name.
- Press "Generate HTML table", check the white preview panel, then choose "Copy HTML", "Copy CSS" or "Download HTML".
Worked example
Type three lines: "Name, Qty", "Pen, 12" and "Ink, 3". Set the caption to Stock and tick both header options. The output opens with a table element of class data-table and a caption reading Stock, then a thead with two th cells (Name, Qty). In the body, Pen and Ink become th scope="row" cells while 12 and 3 are plain td cells, all trimmed of spaces.
When to use this tool
- Turning a range copied from a spreadsheet into markup for a static help page.
- Building an accessible price table with row headers for a documentation site.
- Grabbing the matching stylesheet so a table pasted into a CMS keeps its borders.
Important limitations
Generates clean semantic HTML table code. Does not dynamically paginate, sort, or bind database data. For complex multi-tier tables, review nested colspan or rowspan attributes manually.
Frequently asked questions
How does it split cells into columns?
Commas, tabs, semicolons or pipes are auto-detected across the whole paste, and quoted fields (e.g. "$1,999") are parsed correctly per RFC 4180, so quoted commas no longer split into extra cells.
What do the scope attributes accomplish?
Header cells receive scope="col", and with the row-header option the first cell of each row receives scope="row". Screen readers use them to announce which heading applies to the cell being read, which keeps a data table understandable without seeing it.
Do the three styling presets change the markup?
The table element always carries the class data-table. The preset only changes the stylesheet that "Copy CSS" hands you, so paste that CSS into your page or write your own rules for the same class name.
Are special characters escaped?
Ampersands, angle brackets and double quotes in cells and in the caption are converted to entities, so R&D is written as R&D. Apostrophes are left alone, which is safe inside element text.
Can it merge cells or fix uneven rows?
Yes -- type a lone < in a cell to merge it into the cell on its left (colspan), or a lone ^ to merge it into the cell above (rowspan). Uneven/ragged rows are still not auto-padded; add empty values in the input if you want the columns to stay aligned.