About the HTML Table Generator
Writing an HTML table by hand means a lot of <tr> and <td> tags and a good chance of a missing one. The HTML Table Generator lets you fill in a grid like a spreadsheet instead, and writes clean, indented HTML and matching CSS for you.
Type in the cells, paste a block of cells straight from Excel or Google Sheets, or import CSV. Choose one of five styles, pick a header color (the text color adjusts automatically so it stays readable), add a caption, and decide whether the table should fill the width and scroll sideways on small screens. A live preview shows the result as you go.
The HTML uses <thead>, <tbody>, <caption> and scope="col" headers, which screen readers rely on. Cell text is escaped, so characters like < and & show up as text. Everything runs in your browser.
How to use it
- Set the sizeEnter the number of rows (up to 100) and columns (up to 20), or use the + Row and + Column buttons. The × buttons delete a row or a column.
- Fill in the dataType in the cells. Enter moves down a row and adds a new one at the end; Shift Enter moves up. Paste cells from a spreadsheet into any cell to fill the grid from there.
- Choose a stylePick Lines between rows, Striped rows, All borders, Minimal or No styling, then set the header color, a caption and a CSS class name.
- Set the optionsFirst row is a header, Scroll on small screens and Full width are on by default. Turn on Allow HTML in cells only if you want tags inside cells to work.
- Copy the codeCopy the HTML and the CSS separately, download a complete table.html page, or export the data as table.csv.
Key features
Spreadsheet paste
Copy a range in Excel, Google Sheets or Numbers and paste it into a cell. The grid grows to fit the rows and columns you pasted.
Five styles
Lines between rows, striped rows, all borders, a minimal look with an underlined header, or plain HTML with no CSS at all.
Readable header colors
The header text turns white on dark colors and near-black on light ones, based on the brightness of the color you pick.
Accessible markup
Header cells get scope="col", the caption is a real <caption>, and the table is split into <thead> and <tbody>.
Mobile friendly
With Scroll on small screens, the table sits in a wrapper that scrolls sideways instead of breaking the page layout.
Safe preview
The preview is isolated from the page, and scripts and event handlers are stripped from it, even with HTML allowed.
Examples
The default opening hours table
When the page opens, the grid holds a small opening hours table with a header row. With the default options, the HTML starts like this:
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Opens</th>
<th scope="col">Closes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday to Friday</td>
<td>9 AM</td>
<td>6 PM</td>
</tr>
...The CSS gives the header a blue background (#2b59ff) with white text, a light line under each row and a gray background on every second row:
.table thead th {
background: #2b59ff;
color: #ffffff;
font-weight: 600;
}
.table tbody tr:nth-child(even) {
background: #f5f6f8;
}What each style adds
| Style | CSS it adds |
|---|---|
| Lines between rows | Colored header, 1px line under each row |
| Striped rows | Lines, plus a gray background on even rows |
| All borders | Colored header, a border around every cell |
| Minimal | A 2px line under the header in your color |
| No styling | No CSS, except the scroll wrapper if it is on |
Header text that stays readable
Pick a light header color such as lime (#c6f24e) and the header text switches from white to #111111 automatically:
.table thead th {
background: #c6f24e;
color: #111111;
font-weight: 600;
}Pasting from a spreadsheet
Select a block of 2 rows by 3 columns in Excel and paste it into the second cell of the second row. The cells fill from there, and if the block reaches past the last column, a new column is added. A short message confirms "Pasted 2 × 3 cells".
Importing CSV
Open Import CSV and paste:
Name;Score
Ana;98
Bo;87The semicolon is detected automatically, and the grid becomes 3 rows by 2 columns, with Name and Score as the header row.
Class names
The CSS class is cleaned so it is always valid: spaces and symbols are removed, and a leading digit gets a t in front. "2024 pricing!" becomes t2024pricing, and the wrapper becomes t2024pricing-wrap.
Tips
- Keep "First row is a header" on for data tables. Screen readers use the header cells to announce which column a value belongs to.
- Add a caption that says what the table shows. It helps every reader, and search engines use it to understand the table.
- Leave "Scroll on small screens" on for tables with more than three or four columns. Without it, wide tables push the page wider than a phone screen.
- Change the CSS class when you have several table styles on one site, for example pricing or schedule, so the styles do not clash.
- For a quick shareable file, use Full page. It downloads a complete HTML document with the CSS included that opens in any browser.
Common mistakes and limits
- Turning on Allow HTML for pasted dataWith it on, anything that looks like a tag is output as HTML. Only use it for markup you wrote yourself, such as links or bold text, never for data from other people.
- Using tables for page layoutTables are for data in rows and columns. For page layout, use CSS grid or flexbox, which work better on phones and with screen readers.
- Expecting merged cellsThe generator makes regular grids. For cells that span several rows or columns, add colspan or rowspan to the HTML afterward.
- Going over the size limitsThe grid holds up to 100 rows and 20 columns. Larger imports and pastes are cut off at those limits.
- Copying the HTML without the CSSThe styles live in the CSS box. Add them to your stylesheet as well, or the table shows up unstyled.