Build a table with a <thead> row of column headers (Plan, Price, Storage) and a <tbody> with at least two plan rows. Use <th> for the header cells.
Output ready when you are
Press Run to render your code, or Submit to validate your solution.
HTML Tutorial · HTML Lists and Tables
These 20 tasks go with the HTML Tables chapter. 10 of them ask you to build something small from scratch; 10 give you code that is already broken and ask you to work out why. Set aside about 240 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “HTML Tables allow you to display data in a structured, tabular format with rows and columns. Tables are commonly used for schedules, pricing lists, reports, and any content that requires clear organization.” .
1.Build a pricing tableexercise · easy · 15 min
Build a table with a <thead> row of column headers (Plan, Price, Storage) and a <tbody> with at least two plan rows. Use <th> for the header cells.
Passes when: Add a <table> element; Add three header cells in thead; Add at least two rows in tbody.
2.Caption the tableexercise · easy · 15 min · practice plan
Add a <caption> reading "Q1 sales by region" as the table's first child.
Passes when: Add a <caption> as a direct child of the table; The caption should read "Q1 sales by region".
3.Merge header cells with colspanexercise · easy · 15 min · practice plan
The header row needs a "Quarterly Totals" cell that spans across all 3 data columns. Give that <th> colspan="3".
Passes when: Add a header cell reading "Quarterly Totals"; Give the header cell colspan="3".
4.Add a table footerexercise · easy · 15 min · practice plan
Add a <tfoot> row with a "Total" label and the value "$310" alongside the existing thead and tbody.
Passes when: Add a <tfoot> to the table; The footer row should include the label "Total".
5.Label a row headerexercise · easy · 15 min · practice plan
In this player stats table, the first cell of each row names the player and should be a row header. Change those cells to <th scope="row">.
Passes when: Turn the player name cell into a <th scope="row">; The row header should still say "Amara".
6.Fix the headers written as data cellsbug fix · easy · 15 min
This table's column headers were written with <td> instead of <th>, so screen readers can't announce them as headers. Fix the header row.
Passes when: Use <th> for both header cells.
7.Fix the wrong colspanbug fix · easy · 15 min · practice plan
This 3-column table's title row uses colspan="2", so it doesn't stretch across the last column. Fix the colspan to span all 3 columns.
Passes when: Set colspan="3" on the title cell.
8.Fix the missing scope attributebug fix · easy · 15 min · practice plan
These column headers are missing scope="col", which screen readers rely on to associate each header with its column. Add it to both.
Passes when: Add scope="col" to both header cells.
9.Fix the missing tbodybug fix · easy · 15 min · practice plan
This table's data rows sit directly inside <table> with no <tbody> wrapper. Wrap them in a <tbody> so the table has a proper row-group structure.
Passes when: Add a <tbody> wrapping the data row; Keep the row inside tbody.
10.Fix the misplaced captionbug fix · easy · 15 min · practice plan
This table's title is a <p> placed above the table. Turn it into a proper <caption> as the table's first child instead.
Passes when: Add a <caption> as the table's first child; The caption should read "Team roster".
11.Build a basic tableexercise · easy · 10 min · practice plan
Add a table with one row of two cells.
Passes when: Add a table with one row of two cells.
12.Add header cellsexercise · easy · 10 min · practice plan
Use th for the header row.
Passes when: Use th for the header row.
13.Add a captionexercise · easy · 10 min · practice plan
Give the table a caption saying "Team".
Passes when: Give the table a caption saying "Team".
14.Group the head and bodyexercise · easy · 10 min · practice plan
Use thead and tbody to structure the table.
Passes when: Use thead and tbody to structure the table.
15.Span two columnsexercise · medium · 10 min · practice plan
Add a cell that spans two columns.
Passes when: Add a cell that spans two columns.
16.Fix the table with no rowsbug fix · easy · 8 min · practice plan
The table element is empty, so there is nothing to show.
Passes when: The table element is empty, so there is nothing to show.
17.Fix the header row using tdbug fix · easy · 8 min · practice plan
The header row should use th, not td.
Passes when: The header row should use th, not td.
18.Fix the caption placed outsidebug fix · easy · 8 min · practice plan
The caption must be inside the table.
Passes when: The caption must be inside the table.
19.Fix the divs pretending to be a tablebug fix · easy · 8 min · practice plan
Tabular data should use a real table.
Passes when: Tabular data should use a real table.
20.Fix the wrong span attributebug fix · easy · 8 min · practice plan
Column spanning uses colspan, not span.
Passes when: Column spanning uses colspan, not span.
Between them these tasks cover HTML Tables, Table structure, Header cells and Captions.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.