Complex Tables

An accessible data table uses semantic structure — <caption> , <thead> , and <th scope> header cells — so screen readers can announce each cell's row and column, while CSS keeps the table readable and responsive on small screens.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end, you'll build data tables that look professional, work on a phone, and read perfectly to a screen reader.

Before you start: you should be comfortable with selectors, the box model, and pseudo-classes from CSS Basics & Selectors and Modern Layouts . This lesson builds directly on those.

A well-built HTML table is a spreadsheet in disguise. The caption is the sheet's title tab, thead is the frozen header row, tbody is the grid of data, and tfoot is the totals row at the bottom. Strip that structure away and a screen reader is left reading a spreadsheet with every column label deleted — the numbers are there, but nobody can tell what they mean.

HTML tables have a rich semantic structure most developers underuse. A table should contain three sections: thead for header rows, tbody for data rows, and optionally tfoot for summary or total rows. The caption element gives the table a title that a screen reader announces before reading any cells.

For accessibility, every th needs a scope attribute. Use scope="col" in your header for column labels, and scope="row" on the first cell of each data row (a name, a date, a category) so the assistive technology can link every value back to both its column and its row.

The hardest part is responsiveness. Tables are wide, horizontal things that don't fit narrow phones. The fix is either a scroll wrapper ( overflow-x: auto ) or the data-label pattern : on mobile, hide the header, turn each row into a card, and use td::before with content: attr(data-label) to reprint the column name beside each value. You'll build both below.

1. Worked Example — A Styled, Accessible Table

Read this one closely — it's the full pattern. It uses zebra striping with :nth-child(even) , a tr:hover highlight, status badges, right-aligned monospace numbers, and a complete caption / thead / tbody / tfoot structure with scope on every header.

This roster table is plain and hard to scan. Fill in the two ___ blanks in the CSS to add zebra striping and a hover highlight. The instructions and expected result are in the comments.

2. Making Tables Responsive

On mobile, this table transforms each row into a stacked card. Each td carries a data-label attribute, and a ::before pseudo-element reprints that label so the data still makes sense once the thead is hidden. Resize the preview below 600px to watch it switch.

The mobile CSS is already written, but the labels are blank because the cells aren't labelled. Add a data-label="..." to every td so the column name appears on small screens. Follow the example comment in the code.

3. Sticky Headers for Long Tables

When a table is long, the header scrolls out of view and the data becomes meaningless. position: sticky; top: 0; on the th elements pins them to the top of a scrollable container. This example also shows inline progress bars built right inside the cells.

4. Merging Cells with colspan & rowspan

Complex reports need merged cells. colspan merges horizontally across columns; rowspan merges vertically across rows. They power financial reports, schedules, and grouped data displays.

Support is faded now — this starter has only a comment outline, no filled-in code. Build a styled, accessible Monthly Budget table from the brief in the comments. Use everything from this lesson: structure, scope , zebra striping, hover, and right-aligned numbers.

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary