HTML Table Generator
Type into the grid or paste straight from Excel, Google Sheets, CSV or Markdown, choose a style, and copy responsive, accessible HTML table code with a caption and proper header cells. Inline styles keep the design intact in Blogger posts and emails.
Advertisement
How to create an HTML table
- Type or paste your data. Copy cells from Excel or Google Sheets and paste into the first cell, or use Import for CSV and Markdown.
- Mark the headers: header row for column titles, first column for row titles.
- Add a caption that says what the table shows; it helps screen readers and search engines.
- Choose a style. Tick Inline styles for Blogger or email.
- Copy the code and paste it into the HTML view of your editor.
Accessible table structure
The generator follows the W3C table tutorial: one header row in <thead>, header cells as <th scope="col">, optional row headers as <th scope="row">, and a <caption>. This is the code for the example in the grid:
<table class="tbb-table">
<caption>Drink prices</caption>
<thead>
<tr><th scope="col">Drink</th><th scope="col">Size</th><th scope="col" class="num">Price</th></tr>
</thead>
<tbody>
<tr><td>Kopi O</td><td>Regular</td><td class="num">RM2.50</td></tr>
<tr><td>Teh tarik</td><td>Regular</td><td class="num">RM2.80</td></tr>
<tr><td>Milo ais</td><td>Large</td><td class="num">RM4.20</td></tr>
</tbody>
</table>Advertisement
Table styles
| Style | Header | Rows | Best for |
|---|---|---|---|
| Clean | #f3f4f8 | Plain | Blog posts and documentation |
| Striped | #4a3cc2 | Striped #f5f6fb | Long price lists, easy to follow across a row |
| Bordered | #ffffff | Plain | Data-heavy and printable tables |
| Minimal | No fill | Plain | Simple two- or three-column facts |
| Green | #08807c | Striped #f1f8f7 | Highlighting a comparison or plan table |
Tip: use tables for data, not for page layout. A table with one header row and short cells reads well on phones; for long text, a list is usually better.
Sources
Frequently asked questions
How do I make an HTML table?
Type your data into the grid, or copy cells from Excel or Google Sheets and paste them into the first cell: the grid grows to fit. Tick Header row for column titles, choose a style, and copy the code. The output uses <table>, <thead> and <tbody> with <th scope="col"> headers, which screen readers and Google understand.
How do I convert Excel to an HTML table?
Select the cells in Excel or Google Sheets, copy, and paste into any cell of the grid or into the Import box. Copied cells arrive as tab-separated text, which the generator splits into rows and columns. CSV files (with commas or semicolons) and Markdown tables work too.
How do I make a table responsive on mobile?
Keep Responsive wrapper ticked. The table is placed in a container with overflow-x:auto, so a wide table scrolls sideways inside its box instead of stretching the whole page. This prevents the horizontal page scroll that hurts mobile usability.
Why use inline styles?
Blogger posts, some page builders and most email tools remove or ignore <style> blocks, so the table appears unstyled. Tick Inline styles and every cell carries its own style attribute, which survives copy and paste. Use the default scoped stylesheet for your own website, where it keeps the HTML smaller.
Do tables help SEO?
A real HTML table with header cells makes comparison data easy for people and search engines to read, and Google sometimes shows table data as a featured snippet for comparison queries. Use a caption and clear column headers, keep one header row, and never use an image of a table for important numbers.
Can I make a Markdown table?
Yes. Choose Markdown output to get a GitHub-style table with the first row as the header and | escaped inside cells; numeric columns are marked right-aligned with ---:. Paste it into GitHub, Notion, Obsidian or any Markdown editor. You can also paste a Markdown table into the Import box to turn it into HTML.
Is there a limit on table size?
The grid holds up to 60 rows and 20 columns, which covers comparison and price tables. For bigger data, paste it into the Import box: the code is generated in your browser, and nothing is uploaded.
Share this HTML table generator
Advertisement