HTML Table Generator
An HTML table generator turns a spreadsheet-style grid into ready-to-paste table markup: set the rows and columns, type or import the data, pick a style, then copy the code. The built-in sample here fills a 6 × 4 pricing table and produces 43 lines of inline-styled HTML — or the same grid as 7 lines of Markdown.
Quick Presets
Edit Table
Import Data
Live Preview
Generated Code
Helps support this free tool with a small HTML comment
Popular Tools
About HTML Table Generator
This generator builds table markup from a grid you edit on the page. The minus and plus buttons beside Rows and Columns resize the grid, every cell is a plain text box, and the red cross at the start of a row deletes that row. If the data exists elsewhere, paste it into the Import Data box and press Import CSV, Import TSV or Import Pipe: the grid is rebuilt from the pasted text, and rows with fewer fields are padded so every row ends up the same width.
Six checkboxes decide how the table looks. Header Row promotes the first row to th cells inside a thead, Striped Rows shades alternate rows, Bordered draws a full grid instead of bottom rules only, Hover Effect adds a hover background, Responsive wraps the table in a horizontal-scroll container, and Compact cuts cell padding from 10px 16px down to 4px 8px. Header BG, Header Text and Border Color are colour pickers, and the Quick Presets row (Simple, Striped, Dark, Colorful, Minimal, Compact, Pricing) sets all of them at once.
The Generated Code panel offers six outputs. HTML writes every rule as an inline style attribute, which is the form most email clients keep. HTML + CSS moves the rules into a style block on a .fwt-table class. Bootstrap emits table, table-striped, table-bordered, table-hover and table-sm classes and Tailwind emits utility classes with an overflow-x-auto wrapper, so both need their framework stylesheet on the page. Markdown pads the columns so the source stays aligned, and CSV quotes a field only when it holds a comma, quote or line break.
What it does not do: cells cannot be merged, so no colspan or rowspan attribute is written, and the header cells carry no scope attribute, which screen readers use to tie a header to its column. Sorting, pagination and captions are not generated either. The grid is built in your browser and never uploaded.
Use Cases
How to use
Set the grid size with the minus and plus buttons next to Rows and Columns, then type your content straight into the cells under Edit Table.
Or paste CSV, TSV or pipe-delimited data into the Import Data box and press Import CSV or Import TSV to fill the grid at once; Load Sample drops in demo data.
Tick the styling you want: Header Row, Striped Rows, Bordered, Hover Effect, Responsive and Compact.
Set Header BG, Header Text and Border Color with the colour pickers, or click a Quick Presets button such as Striped, Dark, Minimal or Pricing.
Check the result under Live Preview, and use the red cross beside a row or the + Add Row and + Add Column buttons to adjust the layout.
Choose an output format of HTML, HTML + CSS, Bootstrap, Tailwind, Markdown or CSV, then press Copy to put the code on your clipboard.
Pro Tips
- Load Sample replaces the whole grid rather than adding to it, so copy anything you have already typed out of the Generated Code panel before you press it.
- Excel, Google Sheets and Numbers put tab-separated text on the clipboard, so paste a copied range into Import Data and press Import TSV — not Import CSV, which would leave each row in a single cell.
- Import CSV treats the double quote as a delimiter toggle and drops it, so "1,234" arrives as one cell reading 1,234. Import TSV does no quote handling at all and keeps every character as typed.
- Hover Effect only becomes a real rule in the HTML + CSS, Bootstrap and Tailwind outputs. The plain HTML format writes striping as an inline background on alternate rows and ignores hover completely.
- Unticking Include attribution removes the HTML comment from the code, but the HTML + CSS output still carries a /*! ... */ credit line inside the stylesheet — delete that one line by hand if the CSS has to be clean.
Troubleshooting
Pressing Import CSV does nothing and the grid stays empty.
The importer exits silently when the Import Data box is empty or holds only spaces. Paste the rows in first, then press the button that matches your separator: Import CSV for commas, Import TSV for tabs, Import Pipe for the | character.
The Copy button never changes to Copied.
Copying uses the browser clipboard API, which needs a secure page and a real click, and some browsers or extensions block it. If nothing happens, select the code inside the Generated Code panel and press Ctrl+C, or Cmd+C on a Mac.
The Bootstrap or Tailwind output looks completely unstyled on my site.
Those two formats emit class names only — table-striped, table-bordered, overflow-x-auto and so on — and rely on the framework stylesheet already being loaded on your page. If your site ships neither, use HTML or HTML + CSS instead, which carry the rules with them.
Hover Effect is ticked but nothing happens with the plain HTML code.
The plain HTML format has nowhere to put a :hover rule because it writes styles as inline attributes, so the checkbox is ignored there. Switch to HTML + CSS, which adds a .fwt-table tbody tr:hover rule, or to Bootstrap or Tailwind, which add a hover class.
The minus button beside Rows or Columns stops responding.
The grid will not go below one row and one column, so those buttons do nothing once you reach the minimum. To empty the cells without shrinking the grid press Clear All; to remove one specific row use the red cross at the start of it.
Frequently Asked Questions
An HTML table is a grid of data written with the table element. Rows are tr elements, header cells are th, data cells are td, and thead and tbody group the header row and the body. This generator writes exactly that structure, and thead and th appear only while the Header Row checkbox is ticked.
th marks a header cell and td marks a data cell. Browsers render th bold and centred by default, and assistive technology announces it as the label for the cells beneath it. Here the first row becomes th cells inside a thead when Header Row is ticked; untick it and every cell, row one included, is written as td.
No. The grid is always rectangular, so each row gets the same number of cells and no colspan or rowspan attribute is written. If you need merged cells, build the table here first, copy the HTML, then add colspan="2" or rowspan="2" to the cell in your editor and delete the cells it now covers.
Switch the output format from HTML to HTML + CSS. That version prints a style block with .fwt-table, .fwt-table th and .fwt-table td rules, plus an nth-child(even) stripe rule and a tbody tr:hover rule when those boxes are ticked, followed by clean markup that carries no style attributes at all, only class="fwt-table".
Two settings control this. With Bordered unticked, cells get a border-bottom only, so you see horizontal rules and no vertical ones. With it ticked, the lines are drawn in whatever the Border Color picker holds, and the default #e5e7eb is a very light grey that almost vanishes on a white page. Pick a darker colour and the grid appears.
Tick Responsive and choose the Bootstrap or Tailwind output. Bootstrap wraps the table in a div with class table-responsive and Tailwind in a div with overflow-x-auto, so a wide table scrolls sideways instead of breaking the layout. The checkbox has no effect on the HTML, HTML + CSS, Markdown or CSV outputs, which are emitted the same either way.
Yes. Select the range in Excel, Google Sheets or Numbers and copy it: spreadsheets put tab-separated text on the clipboard. Paste that into the Import Data box and press Import TSV. The grid is rebuilt from the pasted rows, the Rows and Columns counters update to match, and any short row is padded with empty cells.
Use the plain HTML output for all three. It carries every colour, border and padding as an inline style attribute on the element itself, so it survives editors and mail clients that strip a style block. In WordPress paste it into a Custom HTML block; in Blogger switch to the HTML view rather than Compose.
Yes, both are output formats. Markdown pads each column with spaces so the raw source stays aligned and adds the separator row under the header, which turns the six-row sample into seven lines. CSV writes one line per row and wraps a field in quotes only when it contains a comma, a quote or a line break, doubling any quote inside it.
Yes, for tabular data: pricing grids, specification lists, schedules, results. What is obsolete is using tables for page layout, a 1990s technique that CSS Grid and Flexbox replaced. Everything this generator writes is a data table with a header row, body rows and cells, which is what search engines and screen readers expect to find.