HTML Table Generator Online
Create HTML or Markdown tables in seconds. Set the number of rows and columns, fill in cell content directly, then copy the clean output. No signup, runs entirely in your browser.
⏱ 7 min read · Complete guide below
<table class="table-bordered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
</tbody>
</table>How to Create an HTML Table
- 1Set the number of rows and columns using the number inputs at the top.
- 2Click each cell in the editor and type your content. The first row can be styled as a header row using the checkbox.
- 3Choose HTML or Markdown output, and toggle bordered or striped class options for HTML.
- 4Click Copy to copy the generated code and paste it into your project.
HTML vs Markdown Tables
HTML tables offer the most control — you can use rowspan, colspan, nested elements, and inline styles. Markdown tables are faster to write and read as plain text, making them ideal for documentation, README files, and pull request descriptions. This tool generates both formats so you can use whichever fits your context.
Understanding HTML Table Structure
A well-formed HTML table is built from a small set of nested elements, and knowing them helps you edit the generated code confidently. The outer <table> wraps everything. Inside, <thead> holds the header row and <tbody> holds the data rows — a separation that helps both styling and accessibility. Each row is a <tr>, header cells are <th>, and ordinary data cells are <td>. That distinction between <th> and <td> is not cosmetic: screen readers use header cells to announce what each data cell means, so marking your header row correctly (via the “first row is header” option) is one of the simplest things you can do to make a table accessible.
When to Use a Table — and When Not To
Tables are the right tool for genuinely tabular data: rows and columns of related values such as a price list, a schedule, a comparison of features, or a set of results. They are the wrong tool for page layout — using tables to position elements on a page is an outdated practice that harms accessibility and responsiveness, and modern CSS with flexbox or grid should handle layout instead. A quick test: if your content has a natural header row and each row describes the same kind of thing, a table is appropriate. If you are only reaching for a table to line things up visually, use CSS.
Making Tables Readable and Responsive
A few habits keep tables usable. Write descriptive headers so no legend is needed, and right-align numeric columns so digits and decimal points line up for easy comparison. The optional bordered and striped classes improve scannability by visually separating rows, which matters most in long tables. On small screens, wide tables are a common pain point — a reliable pattern is to wrap the table in a container with horizontal scrolling, or to keep tables narrow (six to eight columns is a sensible ceiling) and split very wide data into multiple tables. Because this generator produces clean, standard markup, it drops straight into any of these responsive approaches.
From Spreadsheet to Web Table
A great deal of tabular data starts life in a spreadsheet — Excel, Google Sheets, or Numbers — and needs to reach a web page or a Markdown document. The reliable path is to lay the data out in the generator's grid so you can see exactly what each cell contains before you export, rather than hand-editing raw markup where a single missing </td> silently breaks the layout. When you copy content out of a spreadsheet, watch for two things: stray leading or trailing spaces that make columns look misaligned, and characters that carry special meaning. In HTML, a literal <, >, or & inside a cell should be written as an entity (<, >, &) so the browser renders the character instead of trying to interpret it as markup. In a Markdown table, a literal pipe character inside a cell must be escaped as \|, otherwise the renderer reads it as a column boundary and the row splits apart. Handling these small details up front saves far more time than debugging a mangled table after it is already published.
Table Design Tips
Keep Headers Descriptive
Header cells set reader expectations. Use nouns or short noun phrases — "Price (USD)", "Status", "Last Updated" — not abbreviations that require a legend.
Right-Align Numeric Columns
Add style="text-align:right" to numeric <td> elements so decimal points and digits align vertically, making comparison easy.
Bootstrap Classes
The bordered and striped class options generate Bootstrap-compatible class names. Add table as a base class alongside them for full Bootstrap table styling.
Markdown Table Alignment
In GFM Markdown, add colons in the separator row to control alignment: :--- left, :---: center, ---: right.
Accessibility
Always mark header rows with <th> elements (use the "First row is header" option). Screen readers use these to associate data cells with their labels.
Limit Table Width
Tables wider than 6–8 columns become hard to scan. Consider splitting wide tables into multiple narrower ones, or transposing rows and columns if the data allows it.
Frequently Asked Questions
What output formats does the generator support?
The generator outputs standard HTML (with <table>, <thead>, <tbody>, <th>, and <td> elements) or GitHub-Flavored Markdown table syntax. Switch between formats using the HTML / Markdown toggle.
What do the bordered and striped classes do?
These add CSS class names to the <table> element — "table-bordered" and "table-striped" — which are standard class names used by Bootstrap and many other CSS frameworks. If you are not using a framework, add your own CSS rules for these class names.
Can I add more than 10 columns?
The column limit is 10. Most HTML tables wider than 10 columns become difficult to read on screen and in code. For very wide datasets, consider splitting the table or transposing rows and columns.
Does Markdown support table headers?
Yes. GitHub-Flavored Markdown requires a header row followed by a separator row of dashes. When "First row is header" is checked, the generator inserts the separator automatically. Most Markdown renderers (GitHub, GitLab, VS Code, Notion) render GFM tables natively.
How do I use the generated HTML table in my project?
Copy the output and paste it directly into your HTML file. If you are using a CSS framework like Bootstrap, the table will inherit its styles automatically. For plain HTML, add inline styles or link a stylesheet that targets the table element.
Is my content private?
Yes. All content is processed in your browser. Nothing is sent to any server. Your cell data never leaves your device.
What is the difference between <th> and <td>?
A <th> is a header cell and a <td> is a regular data cell. Beyond looking different (headers are usually bold and centred by default), the distinction is important for accessibility: screen readers use <th> cells to announce what each data cell represents, associating a value with its column or row heading. Always mark your header row as headers — using the "first row is header" option — so assistive technology can read the table correctly.
Should I use a table for page layout?
No. Using tables to position elements on a page is an outdated technique that hurts accessibility and makes responsive design difficult. Reserve tables for genuinely tabular data — rows and columns of related values like schedules, price lists, or comparisons. For arranging the layout of a page, use modern CSS such as flexbox or grid, which are designed for that purpose and adapt far better to different screen sizes.
How do I make a wide HTML table responsive on mobile?
The simplest reliable approach is to wrap the table in a container element with horizontal scrolling (CSS overflow-x: auto), so narrow screens can scroll sideways without breaking the layout. Keeping tables reasonably narrow — around six to eight columns — also helps a great deal, and very wide datasets can be split into multiple tables. The clean, standard markup this generator produces works with all of these responsive patterns.
How do I control column alignment in a Markdown table?
In GitHub-Flavored Markdown, alignment is set in the separator row of dashes beneath the header. Add a colon to indicate alignment: :--- for left, :---: for centre, and ---: for right. For example, a right-aligned numeric column uses ---: under its header. When you enable the header option, the generator inserts the separator row for you, and you can add the colons to align individual columns as needed.