<table>: The TABLE Element
Last updated: 2026-10-13
<table>The TABLE Element
The <table> element displays data in tabular form. It consists of rows (<tr>) and cells (<td>/<th>), often with <thead>/<tbody>/<caption>.
| Category | Tables |
|---|---|
| Content Model | Optional <caption>, zero+ <colgroup>, zero+ <thead>/<tbody>/<tfoot>, <tr> |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </table> tag |
| Status | Standard |
📝 Syntax
<table>
<tr>
<th>Header</th>
<td>Data</td>
</tr>
</table>▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <table> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： Don't use tables for page layout (nav, sidebar) — that's CSS's job. Tables are for tabular data only.
❓ FAQ
QCan table still be used for page layout?
ANo — that practice was abandoned over a decade ago. Table layouts hurt accessibility, mobile adaptation, and semantics. Tables are for real two-dimensional data (grade sheets, price lists, comparison tables); layout belongs to Flexbox and Grid.
QDo table rows need an explicit tbody?
ANot strictly — when tbody is omitted, the parser wraps
<tr> in an implicit tbody (one always exists in the DOM). Writing tbody explicitly pays off when you want to style it alone or use thead/tfoot for frozen headers.QHow do I make a responsive table?
ATables handle narrow screens poorly. Common fixes: an outer container with
overflow-x: auto for horizontal scrolling (simplest); turning rows into cards on narrow screens (display: block with data-labels); freezing the first column. Beyond five columns, prefer horizontal scrolling.🏷️ Related Tags
💡 Related Cases
📚 Related Tutorials
