HTML Table Generator
Free HTML table generator. Build a table in a visual grid, pick a style and copy clean HTML with optional inline CSS. No signup required.
| Row actions | ||||
|---|---|---|---|---|
| Header | ||||
Import from CSV, TSV or a markdown table
<table style="border-collapse:collapse;font-family:sans-serif;font-size:14px">
<thead>
<tr>
<th style="padding:6px 12px;border:1px solid #d0d7de;text-align:left">Product</th>
<th style="padding:6px 12px;border:1px solid #d0d7de;text-align:left">Category</th>
<th style="padding:6px 12px;border:1px solid #d0d7de;text-align:right">Price</th>
<th style="padding:6px 12px;border:1px solid #d0d7de;text-align:center">In stock</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:left">Notebook</td>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:left">Stationery</td>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:right">4.50</td>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:center">Yes</td>
</tr>
<tr>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:left">Desk lamp</td>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:left">Lighting</td>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:right">29.99</td>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:center">No</td>
</tr>
<tr>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:left">USB-C cable</td>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:left">Electronics</td>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:right">9.00</td>
<td style="padding:6px 12px;border:1px solid #d0d7de;text-align:center">Yes</td>
</tr>
</tbody>
</table>| Product | Category | Price | In stock |
|---|---|---|---|
| Notebook | Stationery | 4.50 | Yes |
| Desk lamp | Lighting | 29.99 | No |
| USB-C cable | Electronics | 9.00 | Yes |
What Is an HTML Table Generator?
An HTML table generator lets you fill in a visual grid and produces the matching <table> markup: a <thead> with <th> cells, a <tbody> with one <tr> per row, an optional <caption> and alignment written as text-align styles. You see a rendered preview next to the source, so you can check the result before pasting it into a page, a CMS or an email.
Hand-writing an HTML table is verbose: every cell needs an opening and closing tag, and one missing </td> shifts the whole row. A table generator produces correct, indented markup every time, with every value escaped. The page runs in your browser and stores nothing.
How to Build an HTML Table
- Type column names in the header row and values in the cells. Press Enter to move down; Add row and Add column change the shape.
- Or open the import panel and paste CSV, TSV or a markdown table.
- Pick a theme: None for bare markup, Minimal borders or Striped rows for a table that looks finished without a stylesheet.
- Add a caption if the table needs a title, and set alignment per column with the icons above the grid.
- Copy the HTML from the output pane or download table.html. The preview shows exactly what the markup renders.
HTML Table Elements Reference
| Element | Purpose | Generated when |
|---|---|---|
| <table> | Container for the whole table | Always |
| <caption> | Visible title, read first by screen readers | Caption field is filled |
| <thead> | Groups the header row | thead / tbody is on |
| <th> | Header cell, bold and centered by default | Header row is on |
| <tbody> | Groups the data rows | thead / tbody is on |
| <tr> / <td> | Row and data cell | One per grid row and cell |
| style="text-align:right" | Column alignment | Column alignment is not default |
| border="1" | Legacy visible borders | border attribute is ticked |
Styling: None, Minimal or Striped
The None theme is right when the page already has table styles; the markup carries only structure and alignment. Minimal writes border-collapse on the table and padding plus a thin border on every cell, which is enough for documentation and admin pages. Striped adds a light background to alternate body rows so wide tables are easier to scan. Because the styles are inline, they survive being pasted into Gmail, Outlook, WordPress and other editors that drop <style> blocks; in your own codebase, prefer None and a CSS class.
Accessibility and When to Use an HTML Table
Use an HTML table for tabular data only: rows and columns that mean something together, such as prices by plan or results by test. Do not use tables for page layout. Keep header cells in <th> so assistive technology can announce them with each value, add a caption when the table is separated from its heading, and right-align numeric columns. An html table maker takes care of the markup; your job is to keep the data honest and the headers short. For markdown files, the markdown table generator on this site produces the equivalent pipe table.
Frequently Asked Questions
Should I use thead and tbody?
Yes, in almost every case. Screen readers announce header cells from thead, browsers repeat it when printing long tables, and CSS such as tbody tr:nth-child(even) needs the wrapper to target body rows only. The html table generator turns them on by default; untick the option only for a legacy template that forbids them.
What does the inline CSS theme do?
Minimal adds border-collapse, cell padding and a light border to every cell; Striped adds an alternating row background on top of that. The styles are written inline on each element so the table looks the same when pasted into an email, a CMS or a page without a stylesheet. Choose None to get bare HTML you can style with your own classes.
Are cell values escaped?
Yes. Characters such as <, >, & and quotes are converted to HTML entities so a cell containing <script> or a comparison like a < b displays as text and cannot break the page.
Can I import data instead of typing it?
Yes. Open the import panel below the grid and paste CSV, TSV or a markdown table. The grid fills in and the HTML table updates immediately.
Does the border attribute still work in HTML5?
Browsers still honour border="1" on a table, but it is deprecated in favour of CSS. Use it for email clients that strip styles; otherwise leave it off and rely on the Minimal or Striped theme.