HTML Table Generator
Paste cells copied from a spreadsheet, or CSV text. Choose a header row, a caption and an indent, and copy markup that uses proper header cells and scopes.
Preview
Worked examples
A small table
Name,Qty A & B,2
<table> <thead> <tr> <th scope="col">Name</th> <th scope="col">Qty</th> </tr> </thead> <tbody> <tr> <td>A & B</td> <td>2</td> </tr> </tbody> </table>
The ampersand is escaped and the headers have a scope.
About HTML Table Generator
A well made HTML table separates its header from its body, uses th for header cells, says whether each header applies to a column or a row, and escapes characters such as the ampersand. Writing that for a large grid by hand is slow, and exporting from a spreadsheet gives bulky markup full of inline styles that you then have to clean up.
Paste your data and this generator produces tidy markup: thead and tbody, th with scope="col" for the headings, scope="row" for the first column if you want it, an optional caption, class and id, and the indent you prefer. Cells copied from a spreadsheet arrive separated by tabs and are detected automatically, and CSV with quotes, commas or line breaks inside values is read properly. Short rows are padded with empty cells, and a live preview shows how the table will look.
How to use HTML Table Generator
- Copy cells from a spreadsheet and paste them in, or paste CSV text.
- Leave the separator on detect, or choose one.
- Choose whether the first row is a header and whether the first column is a row header, then add a caption, class or id.
- Copy the HTML.
Common uses
- Adding a table to a web page or an email template
- Turning a spreadsheet range into markup for a content management system
- Producing accessible tables for documentation
- Making a quick table for a bug report or a pull request
Frequently asked questions
Why does the code use scope on header cells?
The scope attribute tells assistive technology whether a header applies to the column below it or the row beside it, which makes the table much easier to follow with a screen reader.
Is the content escaped?
Yes. Ampersands and angle brackets in your data become entities, so the table shows your text as typed and cannot break the page.
What if rows have different lengths?
The table is as wide as the longest row, and shorter rows are filled with empty cells so every row has the same number of columns.
Does the output include styles?
No. It is plain markup. Add a class and style it in your stylesheet, which keeps the HTML small and easy to change.
Can I merge cells?
This tool makes regular grids. Add colspan or rowspan by hand afterwards if you need merged cells.