🧱 Days 1–5 – HTML Foundations · Day 05
Day 5: Lists & Tables
⏱ 75 min📶 Beginner🎯 100% self-study
Day 5 / 15
✅ Today you will learn
- Unordered, ordered and description lists
- Nested lists and list attributes
- Tables: tr, th, td
- thead, tbody, tfoot, caption and scope
- Merging cells with colspan and rowspan
🏢 In the real world
Wedding planners often order 20 kg of sweets at once. They ask for a clear price list, a step-by-step ordering process and a bulk-rate table with discounts. Lists and tables organise exactly this kind of information.
Three kinds of lists
HTML
<h3>Why customers love us (ul)</h3> <ul> <li>Pure desi ghee</li> <li>Made fresh every morning</li> <li>FSSAI certified kitchen</li> </ul> <h3>How to place a bulk order (ol)</h3> <ol> <li>Choose sweets and quantity</li> <li>Send the list on WhatsApp</li> <li>Pay 30% advance by UPI</li> <li>Collect or get home delivery</li> </ol> <h3>Sweet glossary (dl)</h3> <dl> <dt>Ghewar</dt><dd>Honeycomb-shaped Rajasthani sweet, made in the monsoon.</dd> <dt>Kalakand</dt><dd>Soft milk cake made from reduced milk and paneer.</dd> </dl>
Nested lists and ol options
HTML
<ul>
<li>Milk sweets
<ul>
<li>Rasmalai</li>
<li>Kalakand</li>
</ul>
</li>
<li>Dry fruit sweets
<ul><li>Kaju katli</li><li>Badam barfi</li></ul>
</li>
</ul>
<ol type="A" start="3"><li>Starts at C</li><li>Then D</li></ol>
<ol reversed><li>Three</li><li>Two</li><li>One – Diwali!</li></ol>💡 Lists are everywhere
Navigation menus, breadcrumbs, product grids and footers are usually built as <ul> lists and styled with CSS. A list tells screen readers “5 items” – very helpful.
Table basics
HTML
<table border="1">
<tr>
<th>Sweet</th><th>Price / kg</th><th>Shelf life</th>
</tr>
<tr>
<td>Kaju katli</td><td>₹900</td><td>10 days</td>
</tr>
<tr>
<td>Rasmalai</td><td>₹480</td><td>2 days (fridge)</td>
</tr>
</table>| Tag | Meaning |
|---|---|
| <table> | The whole table |
| <tr> | Table row |
| <th> | Header cell (bold, centred, read as a header) |
| <td> | Data cell |
| <caption> | Title of the table |
| <thead> <tbody> <tfoot> | Groups of rows: header, body, footer/totals |
A complete, accessible table
HTML
<table border="1" cellpadding="6">
<caption>Bulk order rates (per kg)</caption>
<thead>
<tr><th scope="col">Sweet</th><th scope="col">1–4 kg</th><th scope="col">5–19 kg</th><th scope="col">20 kg +</th></tr>
</thead>
<tbody>
<tr><th scope="row">Kaju katli</th><td>₹900</td><td>₹860</td><td>₹820</td></tr>
<tr><th scope="row">Besan ladoo</th><td>₹500</td><td>₹470</td><td>₹440</td></tr>
<tr><th scope="row">Ghewar</th><td>₹650</td><td>₹620</td><td>₹590</td></tr>
</tbody>
<tfoot>
<tr><td colspan="4">Free delivery in Jaipur on orders above 5 kg</td></tr>
</tfoot>
</table>🧠 Why scope?
scope="col" and scope="row" tell a screen reader that “₹860” belongs to “Kaju katli” and “5–19 kg”. Without them a blind user hears only a stream of numbers.
Merging cells
HTML
<table border="1" cellpadding="6"> <caption>Festive opening hours</caption> <tr><th>Day</th><th>Morning</th><th>Evening</th></tr> <tr><td>Dhanteras</td><td colspan="2">Open 7 AM – 11 PM non-stop</td></tr> <tr><td rowspan="2">Diwali</td><td>7 AM – 1 PM</td><td>Closed for puja</td></tr> <tr><td colspan="2">Online orders only after 1 PM</td></tr> </table>
⚠️ Tables are for data, not layout
Old websites used tables to place columns. Today layout is done with CSS Flexbox and Grid. Tables are only for tabular data: prices, timetables, results.
Real example: the menu page content
HTML
<h1>Menu & Prices</h1>
<ul>
<li><a href="#rates">Bulk rates</a></li>
<li><a href="#steps">How to order</a></li>
</ul>
<h2 id="rates">Bulk rates</h2>
<table border="1" cellpadding="5">
<caption>Prices per kg (GST included)</caption>
<thead><tr><th scope="col">Sweet</th><th scope="col">Price</th><th scope="col">Best for</th></tr></thead>
<tbody>
<tr><th scope="row">Kaju katli</th><td>₹900</td><td>Diwali gifts</td></tr>
<tr><th scope="row">Motichoor ladoo</th><td>₹520</td><td>Weddings, puja</td></tr>
<tr><th scope="row">Ghewar</th><td>₹650</td><td>Teej, Raksha Bandhan</td></tr>
</tbody>
</table>
<h2 id="steps">How to order</h2>
<ol><li>WhatsApp your list</li><li>Pay 30% advance</li><li>We confirm the pickup time</li></ol>🏅 Job skills unlocked today
✔ Choose ul, ol or dl correctly✔ Build nested lists✔ Create accessible tables with caption, thead and scope✔ Merge cells with colspan/rowspan
Practice tasks
🏋️ Practice – do it yourself
Task 1: Make your class timetable for Monday–Wednesday with 4 periods and a lunch break merged across all days with rowspan.
Show solution
HTML
<table border="1" cellpadding="6"> <caption>Class 10-B timetable</caption> <tr><th>Day</th><th>9:00</th><th>10:00</th><th>11:00</th><th>12:00</th></tr> <tr><th scope="row">Mon</th><td>Maths</td><td>Science</td><td rowspan="3">Lunch</td><td>English</td></tr> <tr><th scope="row">Tue</th><td>Hindi</td><td>Maths</td><td>IT</td></tr> <tr><th scope="row">Wed</th><td>Science</td><td>SST</td><td>Sports</td></tr> </table>
Task 2: Write a nested list of Indian states → three cities each for two states.
Show solution
HTML
<ul> <li>Rajasthan<ul><li>Jaipur</li><li>Udaipur</li><li>Jodhpur</li></ul></li> <li>Maharashtra<ul><li>Mumbai</li><li>Pune</li><li>Nagpur</li></ul></li> </ul>
Task 3: Turn the FAQ of a shop into a description list (dl) with four questions.
Quick quiz
🧠 Quick Quiz – test yourself
1. Steps of a recipe should use…
Order matters.
2. A header cell is…
th = table header.
3. colspan="3" makes a cell…
Spans across columns.
4. Table title goes in…
First child of the table.
5. Should tables be used for page layout?
Tables are for data.
Interview corner
💼 Interview Corner
How do you make a data table accessible?
Use a caption, th for headers with scope="col"/"row" (or headers/id for complex tables), group rows with thead/tbody/tfoot, avoid empty layout tables, and keep data readable on mobile.
When would you use a dl?
For name–value groups: glossaries, FAQs, product specifications, metadata like “Author: …, Date: …”.
Summary
- ul for unordered items, ol for steps, dl for term–definition pairs.
- Tables: table → tr → th/td, plus caption, thead, tbody, tfoot.
- scope makes tables accessible; colspan/rowspan merge cells.
- Use tables only for data – never for layout.
➡️ Next
Day 6: forms – build the bulk-order enquiry form with inputs, labels and buttons.
Frequently Asked Questions
How do I make tables look good?
With CSS: borders, padding, zebra rows and a horizontal scroll wrapper for mobile – covered in the CSS course.
Is the border attribute still okay?
It works but is old-fashioned; we use it here only to see the cells. Use CSS borders in real projects.
