HTML table generator

Set the number of rows and columns, type into the cells or paste from a spreadsheet, and copy semantic HTML. Optional CSS adds borders, padding and zebra stripes.

Rows

Columns

Table cells

First row is a headerFirst column is a header

Caption (optional)

CSS class

Include CSSStriped rowsCell borders

Or paste tab-separated or comma-separated data

HTML<table class="data-table"> <thead> <tr> <th scope="col">Item</th> <th scope="col">Qty</th> <th scope="col">Price</th> </tr> </thead> <tbody> <tr> <td>Notebook</td> <td>2</td> <td>$3.50</td> </tr> <tr> <td>Pen</td> <td>10</td> <td>$1.20</td> </tr> </tbody> </table>

CSS.data-table { border-collapse: collapse; inline-size: 100%; } .data-table th, .data-table td { padding: 0.5rem 0.75rem; text-align: start; border: 1px solid #cbd5e1; } .data-table thead th { background: #f1f5f9; } .data-table tbody tr:nth-child(even) { background: #f8fafc; }

Runs in your browser: nothing you enter is sent anywhere.

How to use it

Set the number of rows and columns. Existing text is kept when you resize.
Type into the cells, or paste data and press Load into grid.
Tick whether the first row and column are headers, and add a caption if the table needs a title.
Copy the HTML, and the CSS if you want the suggested styling.

How it works

The first row becomes a thead with th scope="col" cells when it is a header; the remaining rows go into a tbody. A header column uses th scope="row". Cell text is escaped for HTML. The CSS is limited to your class name, so it will not affect other tables on the page.

Example

A grid of Item, Qty and Price with two data rows produces a table with one thead row and two tbody rows. With the class data-table, the CSS selectors start with .data-table.

Tips

Keep the same number of cells in every row; the grid does this for you.
Wrap wide tables in a container with overflow-x: auto so they scroll on a phone instead of stretching the page.

Frequently asked questions

Can I paste data from Excel or Google Sheets?

Yes. Copy the cells in the spreadsheet, paste them into the text box and press Load into grid. Spreadsheet cells are separated by tabs, so they are split correctly. Text separated by commas works too; there is no support for quoted fields that contain commas.

Why does the table use thead and scope?

thead marks the header rows and scope=col or scope=row tells screen readers which cells a header describes, which helps people who navigate tables by cell. A caption gives the table a visible title that assistive tools can announce.

Is special text escaped?

Yes. The characters &, <, > and double quotes in your cells are converted to HTML entities, so text like 5 < 6 cannot break the markup.

How large can the table be?

Up to 30 rows and 12 columns in the grid. Pasted data beyond that is cut off.

Should I use a table for page layout?

No. Tables are for data that has rows and columns. For layout use CSS grid or flexbox, which adapt better to small screens.

More in Developer

All tools in this category: Developer ·Updated November 3, 2026