The <table> element
The <table> tag defines a table for displaying tabular data — rows and columns of related values. Rows are defined with <tr>, and each row’s cells with <td> (data) or <th> (header). Tables should be reserved for real tabular data, not page layout.
Last updated: October 3, 2026
Quick facts
| Category | Flow content |
| Content model | Optional <caption>, then rows grouped via <thead>, <tbody>, and <tfoot>, each containing <tr> rows of <td>/<th> cells |
| Tag omission | Neither the start nor end tag can be omitted |
| Permitted parents | Any element that accepts flow content |
| DOM interface | HTMLTableElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | Presentational attributes like border, cellpadding, and cellspacing are deprecated — style tables with CSS instead. Only the global attributes apply. |
Common examples
A table with a caption and header cells
A caption names the table, and <th> cells with scope label the columns for screen readers.
Striped rows and visible borders
Borders don’t appear by default. These rules add them and color every second row.
Make a wide table scroll on phones
Wrap the table in a div that scrolls sideways, so it doesn’t break the page layout on small screens.
Tables vs CSS grid
An HTML <table> and CSS grid can both arrange content into rows and columns, but they mean different things. A table tells browsers, screen readers and search engines that the content is data: each cell relates to a row heading and a column heading. CSS grid is purely visual and carries no meaning at all.
Use a table for anything you would put in a spreadsheet — prices, timetables, comparisons, statistics. Use CSS grid (or flexbox) for page layout: columns of text, card galleries, headers and sidebars. Building a layout with a table makes it harder to adapt for mobile and confusing for screen reader users.
| <table> | CSS grid | |
|---|---|---|
| Meaning | Tabular data | None (visual only) |
| Screen readers | Announce rows and columns | Read content in order |
| Best for | Data, comparisons | Page layout |
Common mistakes to avoid
- Using tables for page layout. That was common in the 1990s; today use CSS grid or flexbox. Tables are for tabular data only.
- No header cells. Without
<th>andscope, screen readers can’t tell which column or row a value belongs to. - Merging cells without removing others. When you add
colspanorrowspan, delete the cells it now covers, or the table gets extra columns. See <tr>, <td> & <th>. - Skipping the caption. A <caption> tells everyone what the data is, at a glance.
Accessibility & SEO tips
- Group rows with <thead>, <tbody> and <tfoot> so assistive technology understands the structure.
- Keep tables simple: one header row and one header column read far better aloud than complex merged headings.
- Search engines can lift well-structured tables straight into results, for example for comparisons and prices.
- Avoid empty cells used only for spacing; control spacing with CSS padding so screen readers don’t announce blank cells.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.
Tutorial: How to make a table
Related tags
Frequently asked questions
How do I make table borders show?
table, th, td { border: 1px solid #ccc; border-collapse: collapse; }. The border attribute alone is deprecated and produces inconsistent results.