HTML & CSS Table Creator
Style a table by clicking on it instead of writing CSS. Paste rows straight from Excel or Google Sheets, colour single cells or whole columns, stripe the rows, then copy the finished HTML and CSS.
Presets
Import data
Structure
On phones
Selected cells
Whole table
| Header A | Header B | Header C |
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
Code
This tool is free, with no account and no ads. If it saved you time, you can support it.
DonateHow to use
- Click into the table and type, paste a block of cells from Excel or Google Sheets, or drop CSV data into Import and build the table from it.
- Click a cell to select it. Shift-click for a range, Cmd/Ctrl-click to add cells, or use the letters and numbers on the edges to pick whole columns and rows.
- Colour the selection, set a width, or copy one cell's style and paste it on others.
- Set the class name, width, padding, border and stripes for the whole table, or start from a preset.
- Choose header cells, a caption and how the table behaves on phones, then copy the code at the bottom. Your table is kept in this browser until you change it.
Questions
- Can I paste data from Excel or Google Sheets?
- Yes. Copy the cells, click where the block should start and paste. Rows and columns are added when the data needs more room.
- What does the code include?
- A style block scoped to your class name and accessible table markup: header cells with scope, an optional caption, and CSS that keeps the table readable on phones. Nothing else, no scripts.
- Does it work with WordPress or Webflow?
- Yes. Paste the code into an HTML or Custom Code block. Change the class name first if you use more than one table on a page.