Module 6: Lists & Tables

📖 HTML Lists

Lists are fundamental for organizing content. HTML offers three types of lists.

1. Unordered Lists (<ul>)

For items where order doesn't matter. Browsers display bullets by default.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
            

Result:

HTML
CSS
JavaScript

2. Ordered Lists (<ol>)

For sequential items. Browsers display numbers by default.

<ol>
    <li>Preheat oven to 180°C</li>
    <li>Mix flour and sugar</li>
    <li>Add eggs and milk</li>
    <li>Bake for 25 minutes</li>
</ol>
            

Ordered List Attributes

<!-- Start from a specific number -->
<ol start="5">
    <li>Item 5</li>
    <li>Item 6</li>
</ol>

<!-- Reverse the order -->
<ol reversed>
    <li>Step 3</li>
    <li>Step 2</li>
    <li>Step 1</li>
</ol>

<!-- Change list type: 1, A, a, I, i -->
<ol type="A">
    <li>Option A</li>
    <li>Option B</li>
</ol>
            

3. Definition Lists (<dl>)

For term-definition pairs, like a glossary or FAQ.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - the standard language for web pages.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - controls the visual presentation of HTML.</dd>
</dl>
            

🪆 Nested Lists

Lists can contain other lists for hierarchical organization.

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

💡 Indentation: Always indent nested lists properly. It makes your code readable and helps you spot missing closing tags.

📊 HTML Tables

Tables display tabular data. Never use tables for page layout — that's what CSS is for!

Basic Table Structure

<table>
    <thead>
        <tr>
            <th>Course</th>
            <th>Duration</th>
            <th>Level</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML Basics</td>
            <td>2 weeks</td>
            <td>Beginner</td>
        </tr>
        <tr>
            <td>CSS Styling</td>
            <td>3 weeks</td>
            <td>Intermediate</td>
        </tr>
    </tbody>
</table>
            

Table Elements Explained

Tag	Purpose
`<table>`	Container for the entire table
`<thead>`	Groups header rows (semantic, helps screen readers)
`<tbody>`	Groups body rows
`<tfoot>`	Groups footer rows (e.g., totals)
`<tr>`	Table row
`<th>`	Header cell (bold and centered by default)
`<td>`	Standard data cell
`<caption>`	Table title/description

Accessible Table with Caption and Scope

<table>
    <caption>Monthly Course Enrollment</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Students</th>
            <th scope="col">Completion Rate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>150</td>
            <td>85%</td>
        </tr>
    </tbody>
</table>
            

💡 Accessibility: The scope attribute tells screen readers whether a <th> is a column header or row header. This is essential for blind users navigating tables.

✏️ Exercise 6.1: Recipe & Pricing Table

Your Task

Create recipe.html containing:

An <h1> with your favorite recipe name
An unordered list of ingredients (at least 5 items)
An ordered list of cooking steps (at least 4 steps)
A nested list showing recipe variations (e.g., vegetarian option with sub-items)

Then create pricing.html containing:

An accessible table with <caption>, <thead>, <tbody>
Columns: Service, Basic Price, Premium Price
At least 3 rows of services
Proper scope attributes on all header cells

📝 Module 6 Quiz

🎯 Module Summary

✅ <ul> for unordered items, <ol> for ordered sequences, <dl> for definitions
✅ Lists can be nested for hierarchical data
✅ Tables need <thead>, <tbody>, and scope for accessibility
✅ Never use tables for page layout — only for tabular data
✅ <caption> describes the table's purpose

← Previous Module Next: Module 7 →