Free HTML Table Generator — Create HTML Tables Online
Set your rows and columns, fill the editable grid with your content, choose styling options, and generate clean HTML table code instantly. Copy or use directly in your project. Runs entirely in your browser.
HTML Table Syntax
An HTML table is created with the <table> element and structured using three core child elements: <thead> for the header section, <tbody> for the body rows, and optionally <tfoot> for footer rows. Within these sections, rows are created with <tr> (table row), and individual cells are created with <td> (table data) or <th> (table header). The <th> element renders in bold and is semantically meaningful — screen readers and search engines recognise header cells as labels for the data cells in their column or row.
A minimal HTML table looks like this:
<table>
<thead>
<tr><th>Name</th><th>Email</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>[email protected]</td></tr>
</tbody>
</table>Cells can span multiple rows or columns using the rowspan and colspan attributes. A caption can be added with the <caption> element. For accessibility, use the scope attribute on <th> elements (scope="col" for column headers, scope="row" for row headers) to explicitly associate headers with their cells.
When to Use HTML Tables vs CSS Grid
The correct rule is simple: use HTML tables for tabular data, and use CSS Grid (or Flexbox) for layout. Tabular data means information that has a meaningful row-and-column structure — comparison tables, financial data, schedules, sports statistics, database record exports, and feature comparison matrices all belong in <table> elements. Using CSS Grid or Flexbox for these cases would make the markup less semantic, harder to maintain, and less accessible to screen reader users.
Layout tasks — placing navigation bars, sidebars, content columns, card grids, or hero sections — belong in CSS Grid or Flexbox, never in HTML tables. The practice of using tables for page layout was common in the early web (before CSS was well-supported) but is considered a serious anti-pattern today for many reasons: it conflates structure with presentation, makes responsive design nearly impossible, harms accessibility, and impedes search engine understanding of content structure.
A useful test: if removing all the styling from your table would still leave data that is naturally read in a grid format (because each row is a record and each column is a field), it is genuinely tabular and <table> is correct. If the grid is only there for visual layout purposes, use CSS Grid.
Accessible Table Design
Accessible tables are essential for users who rely on screen readers. Screen readers navigate tables by announcing the column or row header for each cell as it is read, allowing users to understand what the data means without seeing the visual grid. Without proper markup, a screen reader user hears a meaningless sequence of values with no context.
Key accessibility practices for HTML tables include: always use <th> elements for header cells (not <td> with bold styling); add scope="col" to column headers and scope="row" to row headers; add a <caption> element to describe the table's purpose for users who cannot see it; use the summary attribute (deprecated in HTML5 but still useful for complex tables) or an aria-describedby attribute pointing to a descriptive paragraph; and avoid merging cells unnecessarily, as complex spanning structures are hard for assistive technologies to navigate.
The WCAG 2.1 guideline 1.3.1 (Info and Relationships) requires that information conveyed through visual presentation (such as a table's column-header relationship to data cells) is also available in a programmatic form that assistive technologies can interpret.
Bootstrap Table Classes
Bootstrap provides a comprehensive set of utility classes for styling tables without writing custom CSS. The base class is table, which adds a modest amount of padding and horizontal dividers between rows. Additional modifier classes include:
table-striped— alternating background colours on odd and even rows for easier scanningtable-bordered— visible borders on all cells and the outer edge of the tabletable-borderless— removes all borders for a cleaner, minimal looktable-hover— adds a background highlight on the row under the cursortable-sm— reduces cell padding for a more compact displaytable-dark— dark background with light texttable-responsive(on the wrapper div) — adds horizontal scrolling when the table is wider than its container- Contextual classes on rows or cells:
table-primary,table-success,table-danger,table-warning,table-info,table-light,table-secondary
These classes can be combined freely. The most common production combination is table table-striped table-hover table-responsive, which produces a clean, scannable table that scrolls horizontally on narrow viewports rather than breaking the layout.
Responsive Table Design
Wide tables are a challenge on small screens. The table-responsive wrapper (a <div class="table-responsive"> around the table) enables horizontal scrolling at the component level, allowing the table to maintain its structure while fitting within the viewport with a scroll gesture. This is often the simplest and most reliable solution.
More advanced responsive table techniques include: using CSS to reflow the table into a card-like layout on small screens (where each row becomes a card with label-value pairs); hiding less important columns with CSS media queries; or using JavaScript to provide a column toggle UI. The right approach depends on the amount of data and how users need to interact with it. For simple data tables, the scroll approach is usually sufficient. For complex dashboards where users need to compare all columns, a full reflow into a card layout is more user-friendly on mobile.
Frequently Asked Questions
border-collapse: collapse style on the table and border: 1px solid #dee2e6 on cells. The Bootstrap table-striped class requires Bootstrap CSS to be loaded in your page for the striping effect to appear.<div class="table-responsive"> around the table. In Bootstrap, this enables horizontal scrolling at the component level when the table is wider than its container, preventing the table from breaking the page layout on narrow viewports such as mobile phones. Without this wrapper, a wide table can overflow its container and create a horizontal scrollbar on the entire page.colspan="n" (to span n columns) or rowspan="n" (to span n rows) to the appropriate <td> or <th> element, and remove the cells that are covered by the span. For example, <td colspan="2">Merged</td> spans two columns and requires removing one adjacent cell in that row.<a href="...">link</a>, <strong>bold</strong>, or <img src="...">), and it will be included as-is in the generated output. The editor grid shows the raw text you type rather than rendering it, which makes it easier to edit HTML content in cells.<thead> rows on each printed page for long tables. Practically, JavaScript and CSS can target thead tr th and tbody tr td separately for sorting, highlighting, and styling without relying on nth-child selectors. It is a best practice for any table with more than a few rows.Related Free Tools
Need a custom tool built for your business?
Get a Free Quote