HTML Mastery · Chapter 5
Tables — Every Tag & Attribute
HTML tables are used to display two-dimensional data. They have a rich set of structural tags and accessibility attributes.
All Table Tags
| Tag | Purpose | Notes |
|---|---|---|
| <table> | The outer container for a table. | Block-level element. Must contain at least one <tr>. |
| <caption> | A title/caption for the table. Placed immediately after <table>. | Improves accessibility — screen readers announce it. CSS: caption-side: bottom. |
| <thead> | Groups the header rows of a table. | Semantic grouping. When printing, repeats at top of each page. |
| <tbody> | Groups the body (data) rows of a table. | A table can have multiple <tbody> sections to group related rows. |
| <tfoot> | Groups the footer rows (totals, summaries). | Rendered last, even if declared before <tbody>. Repeats at bottom when printing. |
| <tr> | A table row. Contains <th> or <td> elements. | Live inside <thead>, <tbody>, or <tfoot>. |
| <th> | A header cell. Bold and centered by default. | Use the scope attribute for accessibility. |
| <td> | A data cell. The main content cell of a table. | Supports colspan, rowspan, headers. |
| <colgroup> | Groups one or more columns for styling. | Placed after <caption> before <thead>. Contains <col> elements. |
| <col> | Defines properties for a column. Self-closing. | Use span attribute to apply to multiple columns. |
colspan & rowspan Attributes
These attributes allow cells to span across multiple columns or rows — like a "merge cells" in spreadsheets.
| Attribute | Applies To | Purpose |
|---|---|---|
| colspan | <td>, <th> | Number of columns the cell spans horizontally. Default is 1. |
| rowspan | <td>, <th> | Number of rows the cell spans vertically. Default is 1. |
Live example — a schedule table with merged cells:
| Time | Monday | Tuesday | Wednesday |
|---|---|---|---|
| 9:00 AM | HTML Workshop (spans 2 columns) | Free | |
| 10:00 AM (spans 2 rows) | CSS | JavaScript | Python |
| Break | Break | Break | |
<th> and <td> — All Attributes
| Attribute | Values | Purpose |
|---|---|---|
| colspan | Integer ≥ 1 | Number of columns this cell spans. |
| rowspan | Integer ≥ 0 | Number of rows this cell spans. 0 = spans to last row in section. |
| scope | col, row, colgroup, rowgroup | Accessibility: Defines what the <th> header applies to. Screen readers use this to connect headers to cells. |
| headers | Space-separated list of id values | Accessibility: On <td>, explicitly references the header cells that describe it. Used for complex tables. |
| abbr | Short text | On <th>, provides an abbreviated label for screen readers in complex tables. |
Complete Accessible Table Example
<table>
<caption>Student Grades</caption>
<colgroup>
<col span="1" style="width:40%">
<col span="2" style="background:#f0f9ff">
</colgroup>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Math</th>
<th scope="col">Science</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Alice</th>
<td>95</td>
<td>88</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Average</th>
<td>95</td>
<td>88</td>
</tr>
</tfoot>
</table>
Accessibility Rule: Always add
scope="col" to column headers and scope="row" to row headers. Add a <caption> to describe the table. This allows screen readers to correctly associate data cells with their headers.
Chapter Summary
- Tables use
<table>→<thead>/<tbody>/<tfoot>→<tr>→<th>/<td> colspanmerges cells horizontally;rowspanmerges vertically- Add
<caption>and usescopeattributes on<th>for accessibility <colgroup>+<col>apply styles to entire columns without CSS class duplication- Never use tables for page layout — use CSS Grid or Flexbox instead