HTML Table Generator — Free Online Tool

What is HTML Table Generator (Visual Editor)?

HTML table generator creates responsive, styled HTML tables visually — add rows and columns, set headers, merge cells, apply borders, colors, and spacing using a visual editor. Enter data in spreadsheet-like grid or paste from Excel/CSV. Tool generates HTML <table> code with optional CSS styling. Supports table features: header row, footer row, striped rows, hover effects, responsive design (mobile-friendly), sorting, pagination. Export as HTML, CSS, or Markdown table syntax.

• Visual table builder: Add/remove rows and columns with buttons. Enter data directly in cells (spreadsheet-like editor). Drag to resize columns. No HTML coding needed.
• Styling options: Set borders (solid, dashed, none), cell padding, background colors (header, rows, hover), text alignment (left, center, right), font size, font family.
• Cell merging: Merge cells horizontally (colspan) or vertically (rowspan). Useful for complex table layouts (subtotals, grouped headers).
• Responsive tables: Generate mobile-friendly tables with horizontal scroll or stack layout. Ensures tables work on small screens.
• Export formats: HTML (clean semantic markup), CSS (inline or external stylesheet), Markdown (GitHub/Reddit table syntax). Copy code or download file.

Why use HTML table generator?

Writing HTML table markup manually is tedious (<table>, <tr>, <td>, colspan, rowspan). This tool makes table creation visual and instant.

• Save time: Creating tables manually requires typing <table>, <tr>, <th>, <td> for every cell. Tool generates code automatically from visual input.
• Avoid syntax errors: Missing closing tags (</tr>, </td>), incorrect nesting, or wrong colspan/rowspan breaks tables. Tool generates valid HTML.
• Responsive by default: Tool generates responsive tables with overflow-x: auto or mobile-first CSS. Works on all screen sizes.
• Learn HTML table syntax: See how <table>, <thead>, <tbody>, <tfoot>, colspan, rowspan work together. Great for learning table structure.
• Import from Excel/CSV: Paste data from Excel, Google Sheets, or CSV. Tool converts to HTML table instantly. No manual data entry.
• Styled tables without CSS knowledge: Apply borders, colors, hover effects visually. No need to write CSS classes or inline styles manually.

When to use HTML table generator

Use whenever you need to create HTML tables for web pages, documentation, or emails.

• Creating data tables for websites (pricing tables, feature comparisons, schedules).
• Converting Excel or CSV data to HTML for web pages or documentation.
• Building responsive tables that work on mobile devices.
• Generating Markdown tables for GitHub README, Reddit posts, or documentation.
• Creating styled tables with borders, colors, and hover effects.
• Learning HTML table structure (thead, tbody, tfoot, colspan, rowspan).
• Exporting tables for email templates (HTML email).

How to use HTML table generator

Add rows/columns, enter data, apply styling, export HTML.

1. Set table dimensions: Specify rows and columns (e.g., 5 rows × 3 columns). Click 'Create Table' to generate empty grid.
2. Enter data: Click cells to enter text, numbers, or HTML. Or paste from Excel/CSV (Ctrl+V in grid). Tool auto-populates cells.
3. Set header and footer (optional): Enable 'Header row' to make first row <thead> (bold by default). Enable 'Footer row' for <tfoot> (totals, summaries).
4. Merge cells (optional): Select cells and click 'Merge' to combine horizontally (colspan) or vertically (rowspan). Useful for subtotals or grouped headers.
5. Apply styling: Set borders (solid, dashed, none), cell padding, background colors (header, rows, alternating), text alignment (left, center, right), font size.
6. Enable responsive mode (optional): Turn on 'Responsive' to add overflow-x: auto (horizontal scroll on mobile) or stack layout. Ensures table works on small screens.
7. Export table: Choose format: HTML (table code), CSS (stylesheet), Markdown (table syntax). Copy to clipboard or download file.

Key features

• Visual table editor: Add/remove rows and columns with buttons. Enter data in cells (spreadsheet-like). Drag to resize columns.
• Header, body, footer: Enable header row (<thead>), body (<tbody>), footer (<tfoot>). Semantic HTML structure.
• Cell merging: Merge cells horizontally (colspan) or vertically (rowspan). Visual merge/split controls.
• Styling options: Borders (solid, dashed, none), padding, colors (header, rows, hover), alignment (left, center, right), font size, font family.
• Responsive tables: Horizontal scroll (overflow-x: auto) or stack layout for mobile. Ensures usability on small screens.
• Import from Excel/CSV: Paste data from Excel, Google Sheets, or CSV. Auto-populates table cells.
• Export formats: HTML (clean markup), CSS (inline or external), Markdown (GitHub/Reddit syntax). Copy or download.

Common use cases

• Pricing table: 3-column table: Plan, Features, Price. Header row with plan names, rows with features, footer with CTA buttons. Styled with colors and borders.
• Feature comparison: Compare products or services. Columns: Product A, Product B, Product C. Rows: features (checkmarks or X). Responsive for mobile.
• Schedule or timetable: Rows: time slots (9 AM, 10 AM). Columns: days (Mon, Tue, Wed). Cells: events or classes. Styled with alternating row colors.
• Data table from CSV: Import CSV (sales data, logs, reports). Tool converts to HTML table. Add sorting, pagination, or filtering (optional).
• GitHub README table: Export as Markdown. Use in README.md for feature lists, command references, or compatibility matrices. GitHub renders Markdown tables.
• Email template table: Generate HTML table for email campaigns (product listings, invoices). Inline CSS for email client compatibility.

Examples

HTML tables generated by this tool.

3 rows × 3 columns, Header: Name, Age, City. Data: John, 30, NYC; Jane, 25, LA; Bob, 35, SF.

<table> <thead> <tr><th>Name</th><th>Age</th><th>City</th></tr> </thead> <tbody> <tr><td>John</td><td>30</td><td>NYC</td></tr> <tr><td>Jane</td><td>25</td><td>LA</td></tr> <tr><td>Bob</td><td>35</td><td>SF</td></tr> </tbody>
</table>

4 rows × 3 columns, Header: Free, Pro, Enterprise. Row 1: Price ($0, $10, $25). Row 2: Features (merged cell colspan=3). Row 3: Support (Email, Email+Chat, Phone).

<table> <thead> <tr><th>Free</th><th>Pro</th><th>Enterprise</th></tr> </thead> <tbody> <tr><td>$0</td><td>$10</td><td>$25</td></tr> <tr><td colspan='3'>All plans include core features</td></tr> <tr><td>Email</td><td>Email + Chat</td><td>Phone</td></tr> </tbody>
</table>

5 rows × 4 columns, Responsive: enabled (overflow-x: auto)

<div style='overflow-x: auto;'> <table> <thead> <tr><th>Name</th><th>Email</th><th>Phone</th><th>City</th></tr> </thead> <tbody> <tr><td>John</td><td>john@example.com</td><td>555-1234</td><td>NYC</td></tr> <!-- more rows --> </tbody> </table>
</div>

3 rows × 3 columns, Style: striped rows (alternating background), borders, hover effect

<table style='border-collapse: collapse; width: 100%;'> <thead> <tr style='background: #f0f0f0;'><th style='border: 1px solid #ddd; padding: 8px;'>Name</th><th style='border: 1px solid #ddd; padding: 8px;'>Age</th><th style='border: 1px solid #ddd; padding: 8px;'>City</th></tr> </thead> <tbody> <tr style='background: #fff;'><td style='border: 1px solid #ddd; padding: 8px;'>John</td><td style='border: 1px solid #ddd; padding: 8px;'>30</td><td style='border: 1px solid #ddd; padding: 8px;'>NYC</td></tr> <tr style='background: #f9f9f9;'><td style='border: 1px solid #ddd; padding: 8px;'>Jane</td><td style='border: 1px solid #ddd; padding: 8px;'>25</td><td style='border: 1px solid #ddd; padding: 8px;'>LA</td></tr> </tbody>
</table>

3 rows × 3 columns, Export: Markdown

| Name | Age | City |
| --- | --- | --- |
| John | 30 | NYC |
| Jane | 25 | LA |
| Bob | 35 | SF |

Technical reference

HTML table elements and attributes:

<table>

Container for table. Attributes: border (deprecated, use CSS), width, cellpadding (deprecated, use CSS padding), cellspacing (deprecated, use CSS border-spacing).

<thead>

Table header section. Contains <tr> with <th> cells. Semantic grouping. Used for column headers. Example: <thead><tr><th>Name</th><th>Age</th></tr></thead>

<tbody>

Table body section. Contains <tr> with <td> cells. Main data rows. Example: <tbody><tr><td>John</td><td>30</td></tr></tbody>

<tfoot>

Table footer section. Contains <tr> with <td> or <th> cells. Used for totals, summaries, notes. Example: <tfoot><tr><td colspan='2'>Total: $100</td></tr></tfoot>

<tr>

Table row. Contains <th> (header cells) or <td> (data cells). Example: <tr><td>Cell 1</td><td>Cell 2</td></tr>

<th>

Table header cell (bold by default). Use in <thead> for column headers. Attributes: scope='col' (column header), scope='row' (row header). Example: <th scope='col'>Name</th>

<td>

Table data cell. Contains text, numbers, images, or other HTML. Example: <td>John Doe</td>

colspan

Merge cells horizontally. <td colspan='2'> spans 2 columns. Example: <td colspan='3'>Total</td> (spans 3 columns). Used for subtotals or grouped cells.

rowspan

Merge cells vertically. <td rowspan='2'> spans 2 rows. Example: <td rowspan='3'>Category A</td> (spans 3 rows). Used for grouped data.

Responsive tables

Wrap table in <div style='overflow-x: auto;'> for horizontal scroll on mobile. Or use CSS: @media (max-width: 600px) { table { display: block; } } for stack layout.

Common mistakes to avoid

Using <table> for page layout instead of CSS Grid or Flexbox

Why it happens: Tables are for tabular data, not page layout (header, sidebar, content, footer). Using tables for layout is outdated (HTML4 practice), causes accessibility issues (screen readers read as data table), and is not responsive. Modern layouts use CSS Grid or Flexbox.

How to avoid it: Use <table> only for data (pricing tables, schedules, data grids). For page layout, use CSS Grid (display: grid) or Flexbox (display: flex). Tables for data, CSS for layout.

Forgetting <thead>, <tbody>, <tfoot>, using only <tr> and <td>

Why it happens: Without <thead>, <tbody>, <tfoot>, table has no semantic structure. Screen readers can't identify headers, styling (striped rows, sticky headers) is harder, and sorting/pagination libraries may fail. <thead> separates header from data.

How to avoid it: Use <thead> for header rows (<th>), <tbody> for data rows (<td>), <tfoot> for footer rows (totals). Example: <thead><tr><th>Name</th></tr></thead> <tbody><tr><td>John</td></tr></tbody>. Semantic and accessible.

Not making tables responsive, causing horizontal overflow on mobile

Why it happens: Wide tables (many columns) break mobile layout, causing page to scroll horizontally (bad UX). Users can't see all columns. Common on desktop-first designs that forget mobile testing.

How to avoid it: Wrap table in <div style='overflow-x: auto;'> for horizontal scroll. Or use CSS: @media (max-width: 600px) { table { font-size: 12px; } } to shrink font. Or stack layout (display: block for rows).

Using incorrect colspan/rowspan values, causing broken table layout

Why it happens: colspan='2' spans 2 columns. If row has 3 columns but one cell has colspan='3', it overflows (extra column). Or if total cols don't match, cells shift. Common when manually editing colspan after adding/removing columns.

How to avoid it: Ensure total columns match: if row has 3 columns, sum of colspan in that row = 3. Example: <td>A</td><td colspan='2'>B</td> = 3 total. Use visual editor to avoid math errors.

Inline styling every cell instead of using CSS classes, creating bloated HTML

Why it happens: <td style='border: 1px solid #ddd; padding: 8px; background: #fff;'> on every cell = huge HTML file. Inline styles are not reusable, hard to maintain, and increase page size. Common when using WYSIWYG editors without external CSS.

How to avoid it: Use CSS classes: <td class='data-cell'> and external CSS: .data-cell { border: 1px solid #ddd; padding: 8px; }. Reusable, smaller HTML, easier to maintain.

Frequently asked questions

What is the difference between <th> and <td>?

<th> is table header cell (bold by default, used in <thead> for column headers). <td> is table data cell (regular text, used in <tbody> for data). <th> has semantic meaning for screen readers.

How do I merge cells in HTML tables?

Use colspan (horizontal merge): <td colspan='2'> spans 2 columns. Use rowspan (vertical merge): <td rowspan='2'> spans 2 rows. Useful for subtotals or grouped headers.

How do I make tables responsive on mobile?

Wrap table in <div style='overflow-x: auto;'> for horizontal scroll. Or use CSS to shrink font size on mobile. Or stack layout (rows become blocks). Tool has responsive mode built-in.

Can I import data from Excel or CSV?

Yes. Paste from Excel (Ctrl+V or Cmd+V) into the table editor, or upload CSV file. Tool auto-populates cells and generates HTML table.

How do I add borders, colors, or styling to tables?

Use CSS. Inline: <table style='border: 1px solid #ddd;'>. External: <table class='styled-table'> + CSS: .styled-table { border: 1px solid #ddd; }. Tool generates styled tables with CSS.

What is Markdown table syntax?

Pipe (|) separates columns, dashes (---) for header separator. Example: | Name | Age | \n| --- | --- | \n| John | 30 |. Renders as table in GitHub README, Reddit, Discord.

Can I use HTML tables in email?

Yes. Use inline CSS (not external stylesheets). Avoid colspan/rowspan (limited support in Outlook). Use simple tables with borders and padding. Test in email clients (Litmus, Email on Acid).

References

• MDN — HTML Table
• Responsive Tables Guide
• Markdown Tables
• Accessible Tables