HTML
Steps and baking table
Add steps as an ordered list and baking time/temperature as a table.
Ordered steps with ol
The order of baking steps matters. So you use the <ol> (ordered list) tag. The browser numbers the steps automatically.
Each step goes inside an <li>. Example:
<ol>
<li>Whisk eggs and sugar.</li>
<li>Bake in oven.</li>
</ol>
You don't need to write numbers yourself.
Baking table with table
For the baking table you use the <table> tag. A table is made of rows <tr> and cells. Header cells use <th>, data cells use <td>.
<caption> gives the table its title, <thead> groups the header row, and <tbody> groups the data rows.
Exercise Add the steps and the baking table
Take the previous lesson's solution. Add an h2 (Steps) and an ol to <body>; put at least 3 li items inside. Then add another h2 (Baking Table) and a table; include a caption, a thead with th, and a tbody with td.
Show example solution
Add h2 + ol, then h2 + table to body. Inside the table, add caption, thead (with th), and tbody (with td).
Example solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chocolate Cake</title>
</head>
<body>
<h1>Chocolate Cake</h1>
<p>A rich, <strong>cocoa-flavored</strong> cake recipe. About <em>8 slices</em> in 50 minutes.</p>
<h2>Ingredients</h2>
<ul>
<li><strong>3</strong> eggs</li>
<li><strong>1 cup</strong> sugar</li>
<li><strong>1 cup</strong> milk</li>
<li><strong>2 tbsp</strong> cocoa</li>
<li><strong>1 pack</strong> baking powder</li>
<li><strong>2 cups</strong> flour</li>
</ul>
<h2>Steps</h2>
<ol>
<li>Whisk eggs and sugar.</li>
<li>Add milk and melted butter.</li>
<li>Sift in cocoa, flour, and baking powder.</li>
<li>Bake in preheated oven.</li>
</ol>
<h2>Baking Table</h2>
<table>
<caption>Cake baking times</caption>
<thead>
<tr>
<th scope="col">Stage</th>
<th scope="col">Temperature</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Preheat</td>
<td>180°C</td>
<td>10 min</td>
</tr>
<tr>
<td>Baking</td>
<td>180°C</td>
<td>30 min</td>
</tr>
</tbody>
</table>
<!-- add cake photo and closing note -->
</body>
</html>
Test yourself
-
Which is a table data cell tag?
Show answer
<td> — Correct. <td> (table data) is a data cell. <th> is a header cell.
-
Complete the table cell
<td>____</td>
Show answer
<td>180°C</td>
-
Match each table tag to its role
- <table>
- Table container
- <tr>
- Row
- <th>
- Header cell
- <td>
- Data cell
- <caption>
- Table title
Next lesson: Project final - Recipe page
