HTML Table Generator
Generate semantic HTML <table> markup from rows, columns, and headers.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this html table generator
- Set the number of rows and columns and (optionally) a CSS class to apply to the <table>.
- Edit the comma-separated Headers list and the Body textarea, where each line is one row of comma-separated cells.
- Toggle "Include <thead>" if you want a header row, or leave it off for a body-only table.
- Click Generate table to render the markup.
- Click Copy HTML to put the result on your clipboard, or Reset to start fresh.
About this html table generator
The HTML table generator builds a complete, semantic <table> element from a row count, column count, header list, and body rows. It is the fastest way to produce a clean static table for documentation, an email template, or a CMS that does not have a visual table editor.
You enter headers as a single comma-separated line, then body rows as one line per row with cells separated by commas. Any missing cells are auto-filled with placeholder text like "Cell 2.3" so you can scaffold a layout before populating real data. The generator wraps the header row in <thead> and the body rows in <tbody> by default, producing the structure screen readers and CSS expect. An optional CSS class is added to the <table> tag so you can hook into existing stylesheets.
For example, setting 3 rows, 3 columns, headers "Name, Email, Role" and body rows "Ada, [email protected], Admin" and so on produces a complete <table class="table"> with <thead>, three <tbody> rows, and properly escaped cell content. The generator HTML-escapes &, <, and > so user-typed content cannot break the surrounding markup.
FAQ
- What does this tool output?
- A complete <table> element with optional <thead> and a <tbody> containing your data rows. Every cell is HTML-escaped so special characters render literally instead of breaking the markup.
- How do I add or remove rows?
- Change the Rows number to change how many rows render, then edit the Body textarea — one row per line, cells separated by commas. Missing cells get placeholder text; extra cells are kept up to the column count.
- Can I customise the styling?
- Yes. Add a class name in the "CSS class" field and it will appear on the <table> tag. Style it with your own CSS, Tailwind, or framework utilities.
- Do I need <thead> and <tbody>?
- Semantic HTML tables should use both — screen readers and CSS selectors rely on them. The "Include <thead>" toggle lets you skip the header row for data-only tables, but <tbody> is always emitted.
- What if my data contains commas?
- Wrap commas in different cells by splitting the row across multiple lines, or use the CSV to HTML tool which supports quoted cells. This generator splits on plain commas only.
- Is the output accessible?
- Yes. Using <thead> with <th> elements gives screen readers proper column headers, and the markup is plain semantic HTML — no ARIA workarounds needed for a standard data table.