BN Web Tools – Handy Online Tools & Utilities

HTML Table Generator

Create responsive HTML tables visually with custom styling, colors, and borders. Copy clean HTML/CSS code instantly.

HTML Table Generator Live Preview
Table Structure
Styling
Header BG
Header Text
Body BG
Body Text
Border
Striped Row
Options
Striped rows
Hover effect
Responsive scroll
Full width
Outer border
Add caption
Edit Table Content
Click any cell to edit
Loading table...
Live Preview
Generated Code
FULL HTML
—
Tip: For email signatures, use "HTML only" — email clients don't support external CSS. For websites, use "Full HTML" or "HTML + CSS" separately.

Why use this HTML Table Generator?

Creating an HTML table manually can take more time than expected, especially when the table contains many rows and columns. You need to keep track of matching <table>, <tr>, <th>, and <td> tags while making sure that elements such as <thead> and <tbody> are placed correctly.

A small mistake in the markup can also make the table difficult to edit or cause unexpected results on a webpage. Adding borders, spacing, colors, alignment, and responsive behavior manually requires additional HTML and CSS work.

This HTML Table Generator gives you a visual way to create the table first and generate the corresponding code afterward. You can enter your content directly into the cells, adjust the appearance, and see the result in the preview while you work.

The generated markup can include semantic table elements such as <thead>, <tbody>, and an optional <caption>. You can also configure options such as striped rows, hover effects, borders, full-width layout, and responsive horizontal scrolling for wider tables.

How to use the HTML Table Generator

  1. Set the number of rows and columns you need for your table.
  2. Click inside a cell and enter your text, numbers, headings, or other table content.
  3. Use the table settings to adjust the colors, borders, spacing, font settings, alignment, and sizing according to your page design.
  4. Keep the header row enabled when your first row contains column headings. This allows the generated table to use appropriate header markup.
  5. Enable striped rows if you want alternating row backgrounds to make larger tables easier to scan.
  6. Enable the hover effect when you want a row to be highlighted while the visitor moves the mouse over it.
  7. Turn on responsive scrolling for tables that may be wider than a phone screen. This allows visitors to scroll horizontally instead of forcing the entire page to become too wide.
  8. Enable full width when the table should stretch across the available content area.
  9. Add an outer border when you want a visible boundary around the complete table.
  10. Use the caption option when the table needs a short description explaining what the information represents.
  11. Check the live preview while editing to make sure the table looks the way you expect.
  12. When the table is ready, choose the required output format and copy the generated HTML/CSS code or download it as an HTML file.

An example

Suppose you want to create a simple pricing comparison table with three plans. Start by creating 4 rows: one header row and three rows for the plans. Then create 4 columns for Plan, Price, Features, and Support.

Enter the headings and plan information into the cells, then adjust the header background, borders, padding, and row styling. For example, you might use a 1px border and around 12px of cell padding to keep the content readable.

After checking the live preview, enable responsive scrolling if the table is likely to be wider than a mobile screen. Finally, copy the generated HTML/CSS and paste it into the appropriate location on your website.

The resulting markup can use a proper <thead> for the headings and <tbody> for the plan rows, giving you a structured table without having to write every row and cell manually.

HTML Table Generator – FAQ

It's a visual table builder. You set the number of rows and columns, click any cell to type your content, and customize the styling with color pickers, sliders, and toggles. The tool generates clean, standards-compliant HTML and CSS in real time that you can copy or download.
Yes, when "Responsive scroll" is enabled (default), the table is wrapped in a .table-responsive div that adds horizontal scrolling on small screens. This is the standard pattern used by Bootstrap and other frameworks — it keeps the table readable on mobile without breaking its structure.
Partially. Email clients don't support external stylesheets or CSS classes, so you'd need to inline the CSS. Copy the "CSS only" tab and manually convert the class-based rules to inline style="..." attributes on each <th> and <td>. For basic tables, this is straightforward — complex styling may need more work.
Full HTML is a complete HTML document with embedded CSS — perfect for saving as a standalone file or testing. HTML only gives you just the table markup (with class names) to paste into an existing site. CSS only gives you the stylesheet rules that go with the HTML-only version.
Striped rows (also called "zebra striping") alternate the background color of every other row. This makes wide tables much easier to read by helping the eye track across columns without losing its place. It's a common best practice for data-heavy tables.
Two ways: (1) change the number in the Rows/Columns inputs at the top of the settings panel, or (2) use the "Row" and "Column" buttons in the edit panel to add one at a time. To delete, click the small × buttons that appear on column headers and row ends.
Yes. Enable "Add caption" in the Options section, then type your caption text. Captions are semantically important — they describe the table's purpose for screen readers and search engines. They're strongly recommended for accessibility.
No. Everything runs in your browser. Your table content and styling are never sent to any server. If you refresh the page, everything resets — so always copy or download the code before closing the tab.
See All Tools