HTML Table Generator

Build HTML tables visually with inline editing, cell merging, 8 themes, striped rows, and hover effects. Import CSV, copy semantic HTML and CSS. Free, no signup.

Rows4
Cols4

Click to select cells. Double-click to edit. Shift+click or drag to select a range for merging.

Header 1Header 2Header 3Header 4
Row 1 Col 1Row 1 Col 2Row 1 Col 3Row 1 Col 4
Row 2 Col 1Row 2 Col 2Row 2 Col 3Row 2 Col 4
Row 3 Col 1Row 3 Col 2Row 3 Col 3Row 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

BG
Text
BG
Text

border_allBorders

1px

auto_fix_highEffects

text_fieldsTypography

10px
14px

styleThemes

About this tool

The HTML Table Generator lets you build styled HTML tables visually. Click cells to select, double-click to edit content. Use the toolbar to add or remove rows and columns. Select a range of cells and click Merge to combine them with colspan and rowspan.

Customize every aspect of your table with the controls panel: choose header and body colors, border styles, striped rows, hover effects, and typography. Pick from 8 professionally designed themes for instant results, then fine-tune to match your design.

The generated HTML uses semantic markup with thead, tbody, caption, and scope attributes for accessibility. Import existing data by pasting CSV content. Copy the HTML and CSS separately for easy integration into any project.

Frequently Asked Questions

Can I merge cells?

Yes. Click and drag to select a range of cells, or click one cell then Shift+click another. Click the Merge button to combine them. The tool generates proper colspan and rowspan attributes.

Does it generate semantic HTML?

Yes. The output uses proper thead, tbody, caption, th, and td elements. Header cells include scope="col" attributes for accessibility.

Can I import data from a spreadsheet?

Yes. Click the CSV button, paste comma-separated data into the textarea, and click Apply. The tool auto-detects columns and populates the table.

How do I edit cell content?

Double-click any cell to start editing. Press Enter to confirm or Escape to cancel. Click a cell once to select it for merge operations.

Related Tools