HTML Table Generator
Build HTML tables visually with inline editing, drag-select cell merging, 8 themes, striped rows, and CSV import. Copy semantic HTML and CSS.
Click to select cells. Double-click to edit. Shift+click or drag to select a range for merging.
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 | Row 1 Col 4 |
| Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3 | Row 2 Col 4 |
| Row 3 Col 1 | Row 3 Col 2 | Row 3 Col 3 | Row 3 Col 4 |
<table class="styled-table">
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
<td>Row 1 Col 4</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
<td>Row 2 Col 4</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
<td>Row 3 Col 4</td>
</tr>
</tbody>
</table>table_chartTable Setup
paletteColors
border_allBorders
auto_fix_highEffects
text_fieldsTypography
styleThemes
What is the HTML Table Generator?
An HTML table generator outputs the <table> markup and accompanying CSS for a styled data table, with click-to-edit cells, drag-to-select for merging, and live theming. The output uses semantic markup (thead, tbody, caption, scope="col") instead of the layout-table mess that haunted older sites.
How to use the HTML Table Generator
- 1
Set up the structure
Use the +/- buttons to add or remove rows and columns (up to 20×12). Toggle Header Row and add a caption if needed.
- 2
Edit cells inline
Double-click any cell to type. Single-click to select; Shift+click another to extend; drag to select a range, then Merge to combine into one cell with colspan/rowspan.
- 3
Style the table
Pick a theme from the eight presets (Default, Dark, Ocean, Forest, Sunset, Purple, Minimal, Compact), then override colors, borders, padding, alignment, and toggle striped rows or hover effect.
- 4
Copy HTML and CSS
The output panel switches between HTML and CSS tabs. Both use semantic markup and can be pasted into any project. CSV import is in the CSV button if you have spreadsheet data.
Frequently Asked Questions
Can I merge cells?
Yes. Drag-select a range of cells (or click one and Shift+click another), then click Merge in the toolbar. The merged cell gets colspan and rowspan attributes; the cells it covers get hidden in the output. Click the merged cell and Unmerge to reverse.
Does it generate semantic HTML?
Yes. The output uses <thead>, <tbody>, and (when set) <caption>. Header cells (when the Header Row toggle is on) get <th scope="col"> for screen-reader navigation. The CSS is separate from the markup so you can drop the table into any styled context without inline-style conflicts.
Can I import data from a spreadsheet?
Yes. Click CSV in the toolbar and paste comma-separated rows (Excel and Google Sheets export this directly). The parser handles quoted fields with embedded commas. Click Apply and the table populates with one column per CSV column, expanding the table size if needed.
How do I edit cell content?
Double-click any cell to enter edit mode (the cell becomes a text input). Press Enter to save, Escape to cancel. Single-clicking selects the cell for merge or styling operations without entering edit mode.