5.0 HTML Tables
HTML tables present two-dimensional tabular data: rows and columns of related values.
Use tables only for data that has genuine row-column relationships. Do not use tables
for page layout - CSS Grid and Flexbox handle layout.
5.1 Basic Table Structure
A minimal table consists of <table>, <tr> (rows),
and <td> (data cells):
<table>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
</table>
For a well-structured table add <thead>, <tbody>,
and header cells using <th>:
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Engineer</td>
<td>Platform</td>
</tr>
<tr>
<td>Bob</td>
<td>Designer</td>
<td>Product</td>
</tr>
</tbody>
</table>
The scope attribute on <th> tells screen readers whether the
header applies to the column ("col"), the row ("row"), a column
group ("colgroup"), or a row group ("rowgroup").
5.2 Captions
The <caption> element provides a title for the table. It must be the
first child of <table> and is exposed to screen readers as the table's
accessible name.
<table>
<caption>Q2 2026 Sales by Region</caption>
<thead>…</thead>
<tbody>…</tbody>
</table>
5.3 Column Groups
<colgroup> and <col> let you apply styles or widths
to entire columns without touching each cell:
<table>
<colgroup>
<col style="width: 12rem;">
<col style="width: 8rem;">
<col> <!-- remaining width -->
</colgroup>
<thead>…</thead>
<tbody>…</tbody>
</table>
table-layout: fixed in CSS (combined with an explicit width on
<table>) makes column widths respect <col> widths and
renders faster because the browser does not need to measure all cell content first.
5.4 Spanning Cells
colspan merges a cell across multiple columns; rowspan merges
across multiple rows:
<table>
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Scores</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>92</td>
<td>87</td>
</tr>
</tbody>
</table>
5.5 Table Elements Reference
Table elements
| Element | Purpose |
|---|
<table> | Root container for the table. |
<caption> | Table title — must be the first child of <table>. |
<colgroup> | Groups columns for styling. |
<col> | Individual column within a <colgroup>. Void element. |
<thead> | Groups header rows. Repeated when the table spans pages in print. |
<tbody> | Groups data rows. Multiple <tbody> elements are allowed. |
<tfoot> | Groups footer rows (totals, summaries). |
<tr> | Table row. |
<th> | Header cell. Bold and centered by default. Use scope for accessibility. |
<td> | Data cell. |
5.6 References
Tables References