Tables
📌 Covered in this chapter:
Table Structure <table> <thead> <tbody> <tfoot> · <caption> · Cell Spanning (colspan, rowspan) · Header Scoping (scope="col") · Responsive Tables
Welcome to Phase 4 (Chapter 10): Tables! HTML tables display structured tabular data in rows and columns. In this chapter, we master semantic table markup:
<table>, <caption>, <thead>, <tbody>, <tfoot>, cell merging (colspan, rowspan), accessibility (scope="col"), and responsive wrappers.
1Complete Semantic Data Table Syntax
HTML — Semantic Data Table
▶ Run in HTML Editor
<div style="overflow-x: auto;">
<table border="1" style="border-collapse: collapse; width:100%; text-align:left;">
<caption><strong>Sales Report 2026</strong></caption>
<thead style="background:#f97316; color:#fff;">
<tr>
<th scope="col">Month</th>
<th scope="col">Units Sold</th>
<th scope="col">Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>1,200</td>
<td>$24,000</td>
</tr>
</tbody>
<tfoot style="font-weight:bold;">
<tr>
<td>Total</td>
<td>1,200</td>
<td>$24,000</td>
</tr>
</tfoot>
</table>
</div>❓ Frequently Asked Questions (FAQ)
Q1: Why is scope="col" important on <th> header cells?
The scope attribute explicitly informs screen readers whether a header cell applies to a column (scope="col") or a row (scope="row").