Advanced Tables: Structure and Spanning.

Learn how to build professional tables using structural groups and spanning multiple rows or columns for complex data layouts.

The Essentials

<thead>, <tbody>, and <tfoot> group the table's header, body, and footer.

This grouping allows browsers to scroll the body independently of the header.

'colspan' makes a cell span multiple columns.

'rowspan' makes a cell span multiple rows.

Structural tags help with printing long tables across multiple pages.

Grouping content makes it easier to style specific sections with CSS.

Professional Insights

The Power of the Footer

<tfoot> must traditionally appear *before* <tbody> in the code for older browsers, but in modern HTML5, it can be at the end. It's used for totals or summaries.

Complex Spanning Logic

When using rowspan, remember that the next row will have one fewer <td> because the spanning cell 'pushes' into its space. Planning is key!

Accessibility: Table Captions

The <caption> tag (placed immediately after <table>) provides a title for the table. This is the first thing a screen reader reads to describe the data grid.

Data Alignment

Headers (th) are centered by default, while data (td) is left-aligned. Use CSS 'text-align' to create clean, readable columns.

Critical Pitfalls

Using rowspan/colspan incorrectly, causing the table to 'break' or look skewed.

Not using <thead>/<tbody>, which makes styling and printing long data sets harder.

Forgetting that <th> can be used in rows, not just columns (e.g., for row headers).

Using tables for non-tabular data.

Interactive Lab

Sprint Tasks

Create a table with a <thead> and a <tbody>

In the header, create one cell that spans 2 columns using 'colspan'

Add 2 cells in the body row

Loading editor...

Production Preview