Home › Generators › HTML Table Generator
HTML Table Generator
This free HTML table generator builds clean, ready-to-paste table markup in seconds. Pick the number of rows and columns, switch on a header row or a header first column, add a caption, choose a style, and edit every cell right on the page — the preview and the HTML code update live as you type. When the table looks right, copy the code and paste it into any web page, blog post, or email template.
Live preview
How it works
A table is one of the oldest and most useful pieces of HTML. It is the right way to show anything that belongs in rows and columns: a price list, a schedule, a comparison of two products, or a set of results. Writing the markup by hand is slow and error-prone, because every row needs an opening and closing <tr>, every cell needs its own tags, and one missing closing tag can break the whole layout. This generator writes all of that for you. You choose the size and the options, type the contents, and the code is ready to copy.
Rows and columns set the size of the table. The row count includes the header row when the header option is on, so 3 rows with a header means one header row plus two data rows. You can build up to 20 rows and 10 columns, which covers most price lists, schedules, and comparison tables. If you need a bigger table, it is usually better to split it into two smaller tables, because very wide tables are hard to read on a phone.
The header row turns the first row into header cells. Instead of <td>, those cells use <th>, and the generator wraps them in a <thead> section while the rest of the table goes in <tbody>. That matters for more than looks: screen readers announce header cells as the label for their column, so a blind visitor can understand the table, and search engines read the structure better too. The first column as header option does the same thing down the left side — the first cell of each data row becomes a <th scope="row">, which is the right choice when the labels run down the side, like the names of products or days of the week.
A caption is a short title attached to the table itself, for example "Monthly price list". It renders above the table and, unlike a separate heading, it stays connected to the table for screen readers. Use one whenever the table would be confusing without a title.
The style preset picks how the table looks. Bordered draws a grid around every cell, which suits dense data. Striped gives the header a blue background and shades every second row, which makes long tables easier to scan. Plain keeps only light lines, which suits a minimal design. The style is applied through a class on the <table> tag, such as tbl-bordered. If you tick Include the CSS, the copied code starts with a small <style> block that defines that class, so the table looks finished the moment you paste it. If your site already has its own table styles, leave the box unticked and style the class yourself.
Everything on the page is private: the table is built in your browser, nothing is uploaded, and the code is yours to use anywhere.
Worked example
A bakery owner wants a small price list on her website: three items with their prices and whether they are in stock today.
Step 1: Set Rows to 3 and Columns to 3, and leave Header row ticked.
Step 2: Type Coffee in the caption box, or leave it blank and use a heading instead.
Step 3: Fill the first row with Item, Price, In stock, then the next rows with Croissant — $2.50 — Yes and Blueberry muffin — $3.25 — Yes.
Step 4: Leave the style on Bordered and press Copy HTML.
The generator produces a table with 3 <tr> rows: one header row with 3 <th> cells and two data rows with 3 <td> cells each, 9 cells in total. Pasted into a page, it renders as a neat price list with a grid around every cell, and the header row stands out in a light blue background.
FAQ
What HTML does this generator produce?
It produces a standard HTML table with a table element, an optional caption, an optional thead section for the header row, and a tbody section for the data rows. Header cells use th elements and data cells use td elements. The markup is valid, semantic HTML that works in every modern browser.
What is the difference between th and td?
A th element is a header cell and a td element is a data cell. Header cells are usually shown in bold and centered, and screen readers announce them as the label for their row or column, which makes the table accessible. Use th for the labels at the top of a column or at the start of a row, and td for the actual values.
Do I need the CSS the generator offers?
No, the table works without it, but without any CSS a plain table has no visible borders, so it can look like plain text. Tick the Include CSS box and the generator adds a small style block for the style you picked, so the table looks finished the moment you paste it. You can also style it yourself with your site's own stylesheet.
Can I paste the code into a blog or a website builder?
Yes, in most cases. Paste it into an HTML block or a custom HTML widget in WordPress, Ghost, or a similar platform, and the table will render. Some email tools and page builders strip table markup, so check the preview after pasting, and use the plain style if the borders look wrong.
How many rows and columns can I make?
You can make up to 20 rows and 10 columns, which covers most price lists, schedules, and comparison tables. Very large tables are hard to read on a phone, so if you need more rows, consider splitting the data into two tables or showing only the most important columns.