Day 5: Lists and Tables

What You'll Learn Today

Unordered lists, ordered lists, and description lists
Nesting lists
Table structure
Cell merging and table grouping

Unordered Lists (`<ul>`)

Use <ul> when the order of items doesn't matter.

<h2>Shopping List</h2>
<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
    <li>Butter</li>
</ul>

Ordered Lists (`<ol>`)

Use <ol> when order matters.

<h2>How to Make Pasta</h2>
<ol>
    <li>Boil water in a large pot</li>
    <li>Add salt and pasta</li>
    <li>Cook for 8-10 minutes</li>
    <li>Drain and serve</li>
</ol>

`<ol>` Attributes

Attribute	Description	Example
`start`	Starting number	`start="5"`
`reversed`	Reverse order	`reversed`
`type`	Numbering style	`type="A"`, `type="i"`

Description Lists (`<dl>`)

Use <dl> for term-definition pairs.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language. Defines web page structure.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets. Styles web page appearance.</dd>

    <dt>JavaScript</dt>
    <dd>A programming language that adds dynamic functionality to web pages.</dd>
</dl>

Element	Meaning
`<dl>`	Description List
`<dt>`	Description Term
`<dd>`	Description Details

flowchart TB
    subgraph Lists["Three Types of Lists"]
        UL["&lt;ul&gt; Unordered<br>• Item A<br>• Item B"]
        OL["&lt;ol&gt; Ordered<br>1. Step 1<br>2. Step 2"]
        DL["&lt;dl&gt; Description<br>Term: Definition"]
    end
    style UL fill:#3b82f6,color:#fff
    style OL fill:#22c55e,color:#fff
    style DL fill:#f59e0b,color:#fff

Nesting Lists

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>Python</li>
            <li>Node.js</li>
            <li>Java</li>
        </ul>
    </li>
</ul>

Table Basics

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Occupation</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>28</td>
        <td>Engineer</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>32</td>
        <td>Designer</td>
    </tr>
</table>

Element	Meaning
`<table>`	The entire table
`<tr>`	Table Row
`<th>`	Table Header cell
`<td>`	Table Data cell

Table Grouping

`<thead>`, `<tbody>`, `<tfoot>`

<table>
    <caption>2025 Quarterly Sales</caption>
    <thead>
        <tr>
            <th>Quarter</th>
            <th>Revenue</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Q1</td>
            <td>$120,000</td>
        </tr>
        <tr>
            <td>Q2</td>
            <td>$150,000</td>
        </tr>
        <tr>
            <td>Q3</td>
            <td>$180,000</td>
        </tr>
        <tr>
            <td>Q4</td>
            <td>$210,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>$660,000</td>
        </tr>
    </tfoot>
</table>

Element	Purpose
`<caption>`	Table title
`<thead>`	Header section
`<tbody>`	Data section
`<tfoot>`	Footer section (totals, etc.)

Cell Merging

Column Span (`colspan`)

<table>
    <tr>
        <th colspan="2">Full Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>First: John</td>
        <td>Last: Doe</td>
        <td>28</td>
    </tr>
</table>

Row Span (`rowspan`)

<table>
    <tr>
        <th>Category</th>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td rowspan="2">Beverages</td>
        <td>Coffee</td>
        <td>$3.00</td>
    </tr>
    <tr>
        <td>Tea</td>
        <td>$2.50</td>
    </tr>
</table>

Table Accessibility

The scope Attribute

<table>
    <tr>
        <th scope="col">Product</th>
        <th scope="col">Price</th>
        <th scope="col">Stock</th>
    </tr>
    <tr>
        <th scope="row">Apples</th>
        <td>$1.00</td>
        <td>50</td>
    </tr>
</table>

scope value	Meaning
`col`	Header for that column
`row`	Header for that row

Practice: Schedule Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekly Schedule</title>
</head>
<body>
    <h1>Weekly Schedule</h1>

    <table>
        <caption>Programming Bootcamp — Week 1</caption>
        <thead>
            <tr>
                <th scope="col">Time</th>
                <th scope="col">Monday</th>
                <th scope="col">Wednesday</th>
                <th scope="col">Friday</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">10:00–12:00</th>
                <td>HTML Basics</td>
                <td>CSS Basics</td>
                <td>JavaScript Basics</td>
            </tr>
            <tr>
                <th scope="row">1:00–3:00</th>
                <td>HTML Lab</td>
                <td>CSS Lab</td>
                <td>JS Lab</td>
            </tr>
            <tr>
                <th scope="row">3:00–5:00</th>
                <td colspan="3">Self-study &amp; Q&amp;A</td>
            </tr>
        </tbody>
    </table>

    <h2>Glossary</h2>
    <dl>
        <dt>HTML</dt>
        <dd>A markup language for structuring web pages</dd>
        <dt>CSS</dt>
        <dd>A stylesheet language for styling web pages</dd>
        <dt>JavaScript</dt>
        <dd>A programming language for adding interactivity</dd>
    </dl>
</body>
</html>

Summary

Concept	Description
`<ul>`	Unordered list
`<ol>`	Ordered list
`<dl>`	Description list
`<table>`	Table
`<thead>/<tbody>/<tfoot>`	Table grouping
`colspan` / `rowspan`	Cell merging

Key Takeaways

Choose list type based on the nature of the content
Use tables only for tabular data (not for layout)
Use <caption> and scope to improve accessibility
Group table sections for clear structure

Exercises

Exercise 1: Basic

Create a recipe page: ingredients as an unordered list, steps as an ordered list.

Exercise 2: Intermediate

Create a grade report table with <thead>, <tbody>, <tfoot>, and an average score in the footer.

Challenge

Build a complex schedule using both colspan and rowspan.

References

Next up: In Day 6, you'll learn about "Form Basics"—collecting user input.