📋 Lesson 7: Lists & Tables

Unordered Lists

An unordered list is a collection of items where the order doesn't matter — like a shopping list, a set of features, or a list of hobbies. Browsers display each item with a bullet point.

<ul>
    <li>Flour</li>
    <li>Sugar</li>
    <li>Butter</li>
    <li>Eggs</li>
</ul>

Two elements work together here:

• <ul> — the unordered list container (wraps the entire list)
• <li> — each list item inside the container

You can put almost anything inside an <li> — paragraphs, links, images, even other lists:

<ul>
    <li>
        <strong>Flour</strong> — all-purpose, 2 cups
    </li>
    <li>
        <a href="https://example.com/butter">Butter</a> (unsalted)
    </li>
</ul>

Ordered Lists

An ordered list is for items where sequence matters — step-by-step instructions, rankings, or numbered procedures. Browsers display each item with a number.

<ol>
    <li>Preheat the oven to 350°F</li>
    <li>Mix the dry ingredients</li>
    <li>Add the wet ingredients</li>
    <li>Pour into a greased pan</li>
    <li>Bake for 25 minutes</li>
</ol>

The structure is identical to unordered lists — just swap <ul> for <ol>. The <li> elements are the same.

Customizing the Start Number

By default, ordered lists start at 1. You can change this with the start attribute:

<!-- Starts numbering at 5 -->
<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
</ol>

You can also reverse the order with the reversed attribute (useful for countdowns or "top 10" lists):

<ol reversed>
    <li>Third place</li>
    <li>Second place</li>
    <li>First place!</li>
</ol>

Nested Lists

You can put a list inside a list item to create multi-level outlines. This is called nesting:

<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>Databases</li>
        </ul>
    </li>
</ul>

Notice that the nested <ul> goes inside the <li>, not after it. The browser automatically changes the bullet style for each level (disc → circle → square), though you can customize this with CSS.

You can also mix list types — an ordered list inside an unordered one, or vice versa:

<ol>
    <li>Go to the grocery store
        <ul>
            <li>Milk</li>
            <li>Bread</li>
            <li>Eggs</li>
        </ul>
    </li>
    <li>Come home and unpack</li>
    <li>Start cooking dinner</li>
</ol>

Definition Lists

A definition list is for term-description pairs — glossaries, FAQs, or any content where a label is paired with an explanation:

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

    <dt>CSS</dt>
    <dd>Cascading Style Sheets — a language for
        describing how HTML elements look.</dd>

    <dt>JavaScript</dt>
    <dd>A programming language that makes web pages
        interactive and dynamic.</dd>
</dl>

Three elements work together:

• <dl> — the definition list wrapper
• <dt> — the definition term (the word or phrase being defined)
• <dd> — the definition description (the explanation)

A single term can have multiple descriptions, and a single description can apply to multiple terms:

<dl>
    <!-- One term, multiple descriptions -->
    <dt>HTML</dt>
    <dd>A markup language for web content</dd>
    <dd>First released in 1993 by Tim Berners-Lee</dd>

    <!-- Multiple terms, one description -->
    <dt>Frontend</dt>
    <dt>Client-side</dt>
    <dd>The part of a website that runs in the browser</dd>
</dl>

Definition lists are underused by beginners, but they're perfect for metadata displays, settings panels, FAQ pages, and glossaries.

Tables: The Basics

HTML tables display data in rows and columns — like a spreadsheet. Here's the simplest possible table:

<table>
    <tr>
        <td>Apple</td>
        <td>Red</td>
        <td>$1.20</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>Yellow</td>
        <td>$0.50</td>
    </tr>
</table>

The key elements:

• <table> — the table container
• <tr> — a table row
• <td> — a table data cell (one piece of data)

Adding Header Cells

Use <th> instead of <td> for header cells. Browsers render them bold and centered by default, and screen readers use them to announce which column or row a data cell belongs to:

<table>
    <tr>
        <th>Fruit</th>
        <th>Color</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>Red</td>
        <td>$1.20</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>Yellow</td>
        <td>$0.50</td>
    </tr>
</table>

Proper Table Structure

For better accessibility and styling control, wrap your rows in semantic sections:

<table>
    <caption>Fruit Prices — Spring 2026</caption>
    <thead>
        <tr>
            <th>Fruit</th>
            <th>Color</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>Red</td>
            <td>$1.20</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>Yellow</td>
            <td>$0.50</td>
        </tr>
        <tr>
            <td>Cherry</td>
            <td>Red</td>
            <td>$3.00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Average</td>
            <td>$1.57</td>
        </tr>
    </tfoot>
</table>

The additional elements:

• <caption> — a visible title/description for the table (great for accessibility)
• <thead> — wraps the header row(s)
• <tbody> — wraps the data rows
• <tfoot> — wraps footer/summary rows
• colspan="2" — makes a cell span across multiple columns

Spanning Rows and Columns

Sometimes a cell needs to stretch across multiple columns or rows:

<!-- Cell spans 2 columns -->
<td colspan="2">This cell is twice as wide</td>

<!-- Cell spans 3 rows -->
<td rowspan="3">This cell is three rows tall</td>

When a cell spans columns, remove the corresponding <td> cells from that row (since the spanning cell takes their place). The same logic applies to row spans — the rows below need one fewer cell.

Tables vs. Layout

How do you know if your data belongs in a table? Ask yourself:

• Does the data have rows and columns that relate to each other?
• Would removing a column make the remaining data less meaningful?
• Could you describe it as a spreadsheet?

If you answered yes, it's tabular data — use a table. If the data is just items in a list or content sections on a page, use lists or semantic HTML elements instead.

Hands-on Exercise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Favorite Recipe</title>
</head>
<body>
    <a href="index.html">Back to Home</a>

    <h1>Classic Banana Pancakes</h1>
    <p>Fluffy, golden pancakes made with ripe bananas.
       Ready in under 20 minutes!</p>

    <h2>Ingredients</h2>
    <ul>
        <li>2 ripe bananas</li>
        <li>1 ½ cups all-purpose flour</li>
        <li>1 cup milk</li>
        <li>1 egg</li>
        <li>2 tablespoons sugar</li>
        <li>1 teaspoon baking powder</li>
        <li>Pinch of salt</li>
    </ul>

    <h2>Instructions</h2>
    <ol>
        <li>Mash the bananas in a large bowl</li>
        <li>Add the egg, milk, and sugar; whisk together</li>
        <li>Add the flour, baking powder, and salt; stir
            until just combined (don't over-mix!)</li>
        <li>Heat a non-stick pan over medium heat and add
            a little butter</li>
        <li>Pour ¼ cup of batter per pancake and cook until
            bubbles form on top (about 2 minutes)</li>
        <li>Flip and cook for 1 more minute</li>
        <li>Serve with maple syrup and fresh fruit</li>
    </ol>

    <h2>Nutrition Facts</h2>
    <table>
        <caption>Per serving (2 pancakes)</caption>
        <thead>
            <tr>
                <th>Nutrient</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Calories</td>
                <td>320 kcal</td>
            </tr>
            <tr>
                <td>Protein</td>
                <td>8 g</td>
            </tr>
            <tr>
                <td>Carbohydrates</td>
                <td>52 g</td>
            </tr>
            <tr>
                <td>Fat</td>
                <td>9 g</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Summary

📁 Your Project So Far

my-website/
├── images/
│   └── sunset.jpg
├── index.html
├── about.html
└── recipe.html       ← new in this lesson

🚀 What's Next?

You now know how to present text, link pages, show images, and organize content with lists and tables. But most real websites also need to collect information from users — logins, search boxes, contact forms, surveys. In the next lesson, you'll learn how to build forms and input elements.