Section 1 · Chapter 7
HTML Tables & Data Display
HTML tables structure complex data sets into rows and columns. Master structural elements (`
`, ``, ``, ``, ``), column formatting (``, ``), cell merging (`colspan`, `rowspan`), and accessibility (`scope`).
Live Code Example Overview
Click Try it Yourself » to test full HTML data tables with headers, footers, colgroups, and cell merging live in the playground.
Example: Accessible Multi-Header Data Table
<table style="width:100%;border-collapse:collapse;">
<caption>Quarterly Financial Performance</caption>
<colgroup>
<col style="background:#f1f5f9;">
<col span="2" style="background:#f8fafc;">
</colgroup>
<thead>
<tr style="background:#4f46e5;color:white;">
<th scope="col" rowspan="2">Quarter</th>
<th scope="colgroup" colspan="2">Financial Totals ($)</th>
</tr>
<tr style="background:#6366f1;color:white;">
<th scope="col">Revenue</th>
<th scope="col">Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><strong>Q1 2026</strong></td>
<td>$120,000</td>
<td>$45,000</td>
</tr>
</tbody>
<tfoot style="background:#e2e8f0;font-weight:bold;">
<tr>
<td colspan="2">Total Net Profit YTD</td>
<td>$45,000</td>
</tr>
</tfoot>
</table>
Try it Yourself »
7.1 Core Table Structure Tags (<table>, <caption>, <thead>, <tbody>, <tfoot>)
HTML tables use semantic wrapper containers to separate header, body content, and footer rows:
<table> — Main table container wrapper.<caption> — Table title description (must be placed immediately as the first child of <table>).<thead> — Encapsulates header rows (<tr>) containing column headers (<th>).<tbody> — Encapsulates the main data content rows (<tr>) and data cells (<td>).<tfoot> — Encapsulates summary/total calculations at the bottom of the table.
Try It Yourself: Table Semantic Structure
<table style="width:100%;border-collapse:collapse;">
<caption>Product Inventory</caption>
<thead style="background:#059669;color:white;">
<tr>
<th scope="col">Product Name</th>
<th scope="col">Stock Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop Stand</td>
<td style="color:#059669;font-weight:bold;">In Stock</td>
</tr>
</tbody>
<tfoot style="background:#f1f5f9;">
<tr>
<td>Total Items</td>
<td>1 Product Type</td>
</tr>
</tfoot>
</table>
Try it Yourself »
7.2 Column Formatting with <colgroup> & <col>
The <colgroup> element defines column properties for an entire table column instead of applying inline styles to every cell:
<col style="..."> — Styles a single vertical column.<col span="2" style="..."> — Applies column styles across 2 adjacent columns simultaneously.
Try It Yourself: Colgroup Column Styling
<table style="width:100%;border-collapse:collapse;">
<colgroup>
<col style="background:#e0e7ff;width:40%;">
<col style="background:#fef3c7;width:60%;">
</colgroup>
<tr>
<th>Column 1 (Blue Colgroup)</th>
<th>Column 2 (Yellow Colgroup)</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
</table>
Try it Yourself »
7.3 Cell Merging (colspan, rowspan) & Accessibility (scope)
Merge cells horizontally with colspan or vertically with rowspan. Always provide scope="col" or scope="row" for screen reader clarity:
Table Cell Merging Infographic: Colspan vs Rowspan
Try It Yourself: Colspan & Rowspan Merging
<table border="1" style="width:100%;border-collapse:collapse;">
<tr>
<th rowspan="2" scope="row" style="background:#4f46e5;color:white;">Category</th>
<th colspan="2" scope="colgroup" style="background:#059669;color:white;">Sales Metrics</th>
</tr>
<tr style="background:#e2e8f0;">
<th scope="col">Units</th>
<th scope="col">Revenue</th>
</tr>
<tr>
<td>Electronics</td>
<td>1,200</td>
<td>$85,000</td>
</tr>
</table>
Try it Yourself »
💻 Chapter 7 Hands-On Code Challenge
Build an Enterprise Financial Report Table featuring <caption>, <colgroup>, multi-level headers with colspan="2", and a <tfoot> calculation row:
- Add a
<caption> element at the top.
- Define a
<colgroup> to style the first column distinctly.
- Use
colspan="2" in <thead> for grouped metric headers.
- Add
scope="col" and scope="row" attributes.
- Use
colspan="2" in <tfoot> for the total net profit calculation.
Chapter 7 Key Takeaways
<caption> must be the first child element inside a <table>.<colgroup> and <col> enable column-wide styling without repeated inline rules.scope="col" and scope="row" enhance table accessibility for screen readers.colspan merges cells horizontally; rowspan merges cells vertically.
Done with this
chapter?
Mark it complete to track your progress and unlock
your certificate.
Learner Reviews
No reviews yet. Be the first to review this course!
Write a Review
Share your experience to help other
learners.