The table Element
Tables display data in rows and columns using the <table> element together with rows (<tr>) and cells (<td> or <th>).
Basic Table
<table>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>Alice</td>
<td>Developer</td>
</tr>
<tr>
<td>Bob</td>
<td>Designer</td>
</tr>
</table>Table Elements
| Element | Purpose |
|---|---|
| <table> | Wraps the entire table |
| <tr> | Defines a table row |
| <th> | Defines a header cell (bold, centered by default) |
| <td> | Defines a standard data cell |
| <thead> | Groups the header row(s) |
| <tbody> | Groups the main body rows |
| <tfoot> | Groups footer row(s), e.g. totals |
| <caption> | Provides a title/description for the table |
Structured Table
<table>
<caption>Monthly Sales</caption>
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$12,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$12,000</td>
</tr>
</tfoot>
</table>Merging Cells
The colspan attribute merges a cell across multiple columns, and rowspan merges a cell across multiple rows.
colspan and rowspan
<table>
<tr>
<th colspan="2">Full Name</th>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>Associating Headers with Data
The scope attribute on <th> ("col" or "row") tells assistive technology whether the header applies to a column or a row, improving accessibility for complex tables.
scope Attribute
<th scope="col">Name</th>
<th scope="row">Total</th>Do Not Use Tables for Page Layout
Tables should only be used for genuinely tabular data. Using tables to lay out an entire page (a common practice in the early 2000s) hurts accessibility and responsiveness — use CSS Grid or Flexbox for layout instead.
Best Practice
Always use <th> for header cells (with scope set) and wrap your table body in <tbody>. This improves both accessibility and styling flexibility.