HTML Reference
<table> — The Table Element
The element for tabular data — rows and columns of information. Not for page layout.
Last updated: October 2026
Definition: The <table> element displays data in rows and columns. It contains <tr> (rows), <th> (header cells), and <td> (data cells). Optional grouping elements — <thead>, <tbody>, <tfoot> — improve accessibility and styling.
🎬 Live Example
A complete table with header, body, and footer.
| Language | Type | Year |
|---|---|---|
| HTML | Markup | 1993 |
| CSS | Styling | 1996 |
| JavaScript | Programming | 1995 |
| Python | Programming | 1991 |
💡 Header cells use <th>. Data cells use <td>. Screen readers use this to announce headers when navigating.
Basic Syntax
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
</table>Every row needs the same number of cells unless you use colspan or rowspan.
⚙️ Attributes Reference
| Element | Attribute | Purpose |
|---|---|---|
<table> | border | Legacy. Use CSS border instead. |
<th> | colspan | Span this header across N columns. |
<th> | rowspan | Span this header across N rows. |
<th> | scope | col, row, colgroup, rowgroup. Helps screen readers. |
<td> | colspan | Span this cell across N columns. |
<td> | rowspan | Span this cell across N rows. |
<td> | headers | Associate this cell with specific header IDs. |
Complete Table with thead, tbody, tfoot
Use the grouping elements for accessibility and styling.
<table>
<caption>Programming Languages</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Python</th>
<td>1991</td>
</tr>
<tr>
<th scope="row">JavaScript</th>
<td>1995</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total languages: 2</td>
</tr>
</tfoot>
</table>The <caption> element gives the table a title — critical for accessibility.
colspan and rowspan
<!-- Span 2 columns -->
<tr>
<th colspan="2">Programming Languages</th>
</tr>
<!-- Span 2 rows -->
<tr>
<td rowspan="2">Web</td>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>Warning: Complex spans are hard to maintain and confusing for screen readers. Use them only when the data structure genuinely requires it.
🎯 When to Use Tables vs Grid
| Use case | Tool |
|---|---|
| Data table (prices, specs, comparison) | <table> |
| Page layout (header, sidebar, content) | CSS Grid |
| Card grid, photo gallery | CSS Grid |
| Navigation menu | Flexbox + <ul> |
💡 Rule: If the data only makes sense in a grid of rows and columns, use <table>. For everything else, use CSS.
⚠️ Common Mistakes
- Using tables for layout. This was common in the 2000s. It breaks responsiveness, accessibility, and is not acceptable for new sites.
- Forgetting
<caption>. The caption gives the table a title. Screen readers announce it when users navigate to the table. - Missing
scopeon headers. Withoutscope="col"orscope="row", screen readers can't associate headers with cells correctly. - Using tables for spacing. Use CSS margins and padding. Tables should never control layout.
- Inconsistent number of cells per row. Every row must have the same number of cells unless using colspan. Missing cells break the layout.
- Not making tables responsive. Wide tables overflow on mobile. Wrap in a container with
overflow-x: auto.
♿ Accessibility Notes
- Use
<caption>to give the table a title. Screen readers announce it first. - Use
scope="col"on column headers andscope="row"on row headers. This associates headers with data cells. - Use
<thead>and<tbody>to help screen readers navigate the table structure. - Use
headersattribute for complex tables wherescopeisn't enough. - Complex tables with rowspan/colspan should have a text summary nearby, or split into simpler tables.
- Always add a caption or ARIA label. A table without context is confusing for screen reader users.
❓ Frequently Asked Questions
What is the HTML <table> tag?
The <table> element creates tabular data — rows and columns of information. It is for data, not layout. Use CSS Grid or Flexbox for page layout.
What is the difference between th and td?
th is a header cell (bold and centered by default). td is a data cell. Screen readers use th to announce the column header when reading a cell.
What is the difference between thead, tbody, and tfoot?
thead contains header rows. tbody contains the main data rows. tfoot contains footer rows (totals, summaries). They help screen readers and allow styling the header to stay fixed while scrolling.
What do colspan and rowspan do?
colspan makes a cell span multiple columns. rowspan makes a cell span multiple rows. Use them sparingly — complex spans are hard to maintain and can confuse screen readers.
Should I use tables for layout?
No. Tables are for tabular data. Using them for page layout breaks accessibility, hurts responsiveness, and is considered bad practice since the 2000s. Use CSS Grid or Flexbox.