Build a single-page pricing comparison using a real, accessible HTML table.
The goal of this project is to teach you how to display structured data in HTML using a real, accessible table. You will build a small pricing comparison page with proper headers, a caption, and row scopes. Do not style the page; styling will be addressed in a later project. Focus here on the table structure and the surrounding semantic markup.
In this project, you are required to build a single HTML page that compares three subscription plans side by side using an HTML table.
A semantic page : Use <header> , <main> , and <footer> to structure the page itself.
A real <table> with <thead> and <tbody> separating header rows from data rows.
A <caption> as the first child of the table that names what is being compared.
Header scopes : Use scope="col" on column headers, and scope="row" on the plan-name cells so screen readers can announce data in context.
At least one merged cell : Add colspan or rowspan somewhere meaningful — a section heading above several columns, or a highlight row that spans the table.
Head metadata : Set <title> , <meta charset> , and <meta viewport> .
A single HTML file with a semantic page structure (header, main, footer).
A <table> with a <caption> , <thead> , and <tbody> .
scope="col" on column headers and scope="row" on row headers.
At least one cell using colspan or rowspan for a real reason.
Page metadata set correctly in the head.
By completing this project, you will have a working mental model of when to reach for a table and when not to, and how to mark up a table that is accessible from the moment it ships. You can return to it later to add styles or sticky headers with CSS without changing the structure.