The <table> element is the outer container that holds every part of a table — rows, cells, headers, caption, all of it.
Syntax
<table>
<tr>
<td>cell</td>
</tr>
</table>Basic Example
<table>
<tr>
<th>Course</th>
<th>Duration</th>
</tr>
<tr>
<td>Data Science</td>
<td>6 months</td>
</tr>
</table>Browser output: a basic grid — by default, most browsers render minimal or no visible borders at all; the structural grid only becomes visually obvious once you add CSS border rules.
How It Works
<table> itself holds no data directly — it's purely a container. Real content lives in the <tr> (row) and <td>/<th> (cell) elements nested inside it, optionally grouped by <thead>/<tbody>/<tfoot>.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none in modern HTML — | Older presentational attributes like border, cellpadding, and cellspacing are obsolete; use CSS instead |
Real-World Example
<style>
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
</style>
<table>
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Basic</td><td>₹999</td></tr>
</table>Real tables always pair minimal HTML structure with CSS for visible borders, spacing, and alignment — exactly like this pricing table.
Common Mistakes
- Using deprecated presentational attributes like
<table border="1" cellpadding="5">instead of CSS - Using
<table>for non-tabular page layout — a leftover habit from pre-CSS-Grid web design
Best Practices
- Style every visual aspect (borders, spacing, alignment) with CSS
- Reserve the element strictly for genuine tabular data
Accessibility Considerations
An empty or layout-only <table> with no real headers confuses screen readers, which expect a table to have meaningful row/column relationships to announce.
SEO Considerations
Search engines can extract and display well-structured table data directly in search results (e.g. comparison or pricing tables) when the markup is clean and semantic.
Browser & Modern HTML Notes
All the old presentational table attributes (border, cellpadding, cellspacing, bgcolor) are obsolete in HTML5 — CSS fully replaces them, with far more control.
Mini Practice
- Build a bare 2×2 table, then style it entirely with CSS borders and padding.
- Find an old table using
cellpadding/cellspacingattributes and rewrite it using CSS instead.
