HTML Table Generator
Build an HTML table by filling in a grid instead of writing rows of tags. Paste data from a spreadsheet, decide on a header row, caption and styling, check the live preview and copy markup that is properly structured and accessible.
- Runs in your browser
- No sign-up
- Free to use
How to use HTML Table Generator
- Type into the grid or paste cells from Excel, Google Sheets or a CSV file into the first cell.
- Choose whether the first row and first column are headers, and add a caption if you want one.
- Pick the styling: plain HTML, a small CSS block, or inline styles for email.
- Copy the HTML or download it as a file.
HTML Table Generator features
Semantic markup
Uses thead, tbody, th with scope attributes and caption, the structure screen readers rely on.
Three styling modes
Unstyled markup for your own CSS, a ready CSS block, or inline styles that survive in email clients.
Paste from spreadsheets
Tab-separated cells and CSV text fill the grid in one step.
Safe content
Characters such as <, > and & in your cells are escaped, so the table cannot break the page.
Optional scroll wrapper
Adds a container that lets wide tables scroll sideways on phones.
Live preview
The table is rendered in an isolated frame as you edit.
When to use HTML Table Generator
- Adding a pricing, specification or comparison table to a web page.
- Building a table for an HTML email, where inline styles are required.
- Converting a block of spreadsheet cells into HTML for a CMS.
- Producing a table with merged-cell needs as a starting point to edit by hand.
HTML Table Generator FAQ
What is the correct structure of an HTML table?
A table element containing an optional caption, a thead with the header row, and a tbody with the data rows. Header cells are th elements and data cells are td elements. A scope attribute on each th tells assistive technology whether it labels a column or a row.
Why do header cells and scope matter?
Screen readers announce the relevant header when a user moves from cell to cell. Without th elements a table is read as an unlabelled stream of values. Marking headers correctly costs nothing and makes the data usable for everyone.
When should I use inline styles?
For HTML email. Many mail clients remove style blocks and ignore class names, so every cell has to carry its own style attribute. On a website, a CSS block or your own style sheet is cleaner and far smaller.
How do I make a table responsive?
The simplest reliable method is a wrapper with horizontal scrolling, which the generator can add. The table keeps its layout and can be swiped sideways on narrow screens. Rearranging rows into cards is another approach but requires CSS written for the specific table.
Can I merge cells?
The grid produces a regular table. To merge cells, add colspan or rowspan attributes to the generated code and delete the cells they replace.
Should I use tables for page layout?
No. Tables are for tabular data. Layout belongs to CSS, with flexbox or grid. Layout tables confuse screen readers and do not adapt to small screens. The one exception is HTML email, where table-based layout is still the only approach that works everywhere.
Writing tables that work for everyone
An HTML table is more than a visual grid. Its markup states which cells are headers, which group of rows is the head and which the body, and what the table is about. Browsers use this to repeat headers when a long table is printed. Assistive technology uses it to read out “Price, Team plan: 12 dollars” where a sighted reader would glance up the column. Search engines use it to understand the data. A table built from plain rows of td cells looks the same on screen and loses all of that.
The generated code therefore follows the full structure. The first row goes into thead as th cells with scope="col". If you mark the first column as a header as well, those cells become th with scope="row". A caption, when you provide one, is the table's visible title and the first thing a screen reader announces.
Styling is kept separate from structure by default. The CSS mode adds a small style block that targets the table by class: collapsed borders, comfortable padding, a tinted header and optional stripes. It is a starting point to be adapted to your design. Unstyled output is meant for sites whose style sheet already covers tables.
Email is the special case. Mail clients vary widely in what CSS they accept, and the common denominator is styles written directly on each element. The inline mode writes them out cell by cell. The code is verbose, but it displays the same in webmail, desktop clients and phones, which is what matters for a message that cannot be tested on the reader's device.