Pricing table
Write a table section comparing three pricing tiers.
The pricing section
The pricing section compares plans side by side. A <table> is the right tool for this. Each row is a plan, each column a property.
The structure:
<caption>: the table's title<thead>: the column header row<tbody>: the plan data<th>for headers,<td>for data cells
Order of table elements
Table elements come in order. <caption> is the first child and names the table. <thead> wraps the header row, <tbody> wraps data rows. Each row is a <tr>; cells are <th> or <td>.
This split lets screen readers map headers to columns correctly.
Exercise Add the pricing table section
Take the previous step's <main> with the features. After the features section add a new <section>. Put a non-empty h2 and a table inside it. Inside the table add a non-empty caption, a thead (with tr and non-empty th) and a tbody (at least two tr, each with non-empty td).
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TaskFlow - Task management</title>
</head>
<body>
<main>
<h1>Keep tasks in flow, not in mind</h1>
<p>Manage your team's tasks, deadlines and progress from a single panel with TaskFlow.</p>
<a href="/signup">Start free</a>
<button>Request a tour</button>
<section>
<h2>Why TaskFlow?</h2>
<article>
<h3>Kanban boards</h3>
<p>Move tasks with <strong>drag and drop</strong> and see the flow <em>live</em>.</p>
</article>
<article>
<h3>Automatic reminders</h3>
<p>Get <strong>email</strong> and <em>instant notifications</em> as deadlines approach.</p>
</article>
<ul>
<li><strong>Calendar</strong> view</li>
<li><strong>File</strong> attachments</li>
<li><strong>Tag</strong> system</li>
</ul>
</section>
<section>
<h2>Plans</h2>
<table>
<caption>TaskFlow pricing</caption>
<thead>
<tr>
<th>Plan</th>
<th>Price</th>
<th>Members</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>Free</td>
<td>3</td>
</tr>
<tr>
<td>Pro</td>
<td>$9/mo</td>
<td>Unlimited</td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html>Test yourself
-
Which tag is used for a column header in a table?
- td
- caption
- tbody
- th
Show answer
th — Correct. th is a header cell; td is a normal data cell.
-
Write the tag that wraps the table's header row
<____> <tr> <th>Plan</th> <th>Price</th> </tr> </thead>Show answer
<thead> <tr> <th>Plan</th> <th>Price</th> </tr> </thead> -
Match each table element to its role
- caption
- Table title
- thead
- Header row
- tbody
- Data body
- th
- Column header