Lesson 4: Lists and Tables - Organizing Data

What You'll Learn

  • How to create ordered (numbered) lists
  • How to create unordered (bulleted) lists
  • How to nest lists inside each other
  • How to create tables with rows and columns
  • Table structure and best practices
  • When to use lists vs tables

Why This Matters

Lists and tables help organize information in a clear, scannable format. Lists are perfect for steps, features, or any sequential or grouped information. Tables display data in rows and columns, making comparisons and relationships easy to understand.

Part 1: Unordered Lists (Bullet Points)

Basic Unordered List

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>
Output:
  • Apple
  • Banana
  • Orange
Breaking it down:
  • <ul> = Unordered List (container)
  • <li> = List Item (each bullet point)

Example: Shopping List

<!DOCTYPE html>
<html>
<head>
    <title>Shopping List</title>
</head>
<body>
    <h1>Shopping List</h1>
    
    <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
        <li>Cheese</li>
        <li>Apples</li>
    </ul>
</body>
</html>

Part 2: Ordered Lists (Numbered)

Basic Ordered List

<ol>
    <li>Wake up</li>
    <li>Brush teeth</li>
    <li>Eat breakfast</li>
    <li>Go to work</li>
</ol>
Output:
  1. Wake up
  2. Brush teeth
  3. Eat breakfast
  4. Go to work
Breaking it down:
  • <ol> = Ordered List (container)
  • <li> = List Item (numbered automatically)

Example: Recipe Instructions

<!DOCTYPE html>
<html>
<head>
    <title>Recipe</title>
</head>
<body>
    <h1>Chocolate Chip Cookies</h1>
    
    <h2>Ingredients</h2>
    <ul>
        <li>2 cups flour</li>
        <li>1 cup butter</li>
        <li>1 cup sugar</li>
        <li>2 eggs</li>
        <li>1 tsp vanilla</li>
        <li>2 cups chocolate chips</li>
    </ul>
    
    <h2>Instructions</h2>
    <ol>
        <li>Preheat oven to 350°F</li>
        <li>Mix butter and sugar until fluffy</li>
        <li>Add eggs and vanilla, mix well</li>
        <li>Gradually add flour</li>
        <li>Fold in chocolate chips</li>
        <li>Drop spoonfuls onto baking sheet</li>
        <li>Bake for 10-12 minutes</li>
        <li>Cool and enjoy!</li>
    </ol>
</body>
</html>

Part 3: Nested Lists

You can put lists inside lists:

Example: Nested Unordered Lists

<h2>Web Development Skills</h2>
<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>Node.js</li>
            <li>Python</li>
            <li>PHP</li>
        </ul>
    </li>
    <li>Database
        <ul>
            <li>MySQL</li>
            <li>MongoDB</li>
            <li>PostgreSQL</li>
        </ul>
    </li>
</ul>
Output:
  • Frontend

- HTML

- CSS

- JavaScript

  • Backend

- Node.js

- Python

- PHP

  • Database

- MySQL

- MongoDB

- PostgreSQL

Example: Mixed List Types

<h2>Morning Routine</h2>
<ol>
    <li>Wake up at 7 AM</li>
    <li>Bathroom routine
        <ul>
            <li>Brush teeth</li>
            <li>Shower</li>
            <li>Get dressed</li>
        </ul>
    </li>
    <li>Breakfast
        <ul>
            <li>Coffee</li>
            <li>Toast with butter</li>
            <li>Orange juice</li>
        </ul>
    </li>
    <li>Leave for work</li>
</ol>
Output:
  1. Wake up at 7 AM
  2. Bathroom routine

- Brush teeth

- Shower

- Get dressed

  1. Breakfast

- Coffee

- Toast with butter

- Orange juice

  1. Leave for work

Part 4: List Attributes

Starting at Different Numbers

<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
    <li>Seventh item</li>
</ol>
Output:
  1. Fifth item
  2. Sixth item
  3. Seventh item

Reversed Numbering

<ol reversed>
    <li>Third place</li>
    <li>Second place</li>
    <li>First place</li>
</ol>
Output:
  1. Third place
  2. Second place
  3. First place

Different Number Types

<ol type="A">
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ol>

<ol type="I">
    <li>Item I</li>
    <li>Item II</li>
    <li>Item III</li>
</ol>

Types: 1 (numbers), A (uppercase letters), a (lowercase letters), I (uppercase Roman), i (lowercase Roman)

Part 5: Introduction to Tables

Tables organize data in rows and columns.

Basic Table Structure

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
    </tr>
</table>
Breaking it down:
  • <table> = Container for the entire table
  • <tr> = Table Row
  • <th> = Table Header (bold, centered by default)
  • <td> = Table Data (regular cell)

Part 6: Table Sections

Proper table structure uses these sections:

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$999</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Mouse</td>
            <td>$25</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Keyboard</td>
            <td>$75</td>
            <td>15</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$1,099</td>
            <td>40</td>
        </tr>
    </tfoot>
</table>
Table sections:
  • <thead> = Table header section (top)
  • <tbody> = Table body section (main content)
  • <tfoot> = Table footer section (bottom, for totals/summary)

These sections help with:

  • Accessibility (screen readers)
  • Styling with CSS
  • Printing (headers/footers repeat on each page)

Part 7: Table Attributes

Spanning Columns

<table>
    <tr>
        <th colspan="3">Monthly Report</th>
    </tr>
    <tr>
        <th>Name</th>
        <th>Sales</th>
        <th>Commission</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>$10,000</td>
        <td>$500</td>
    </tr>
</table>

colspan="3" makes the cell span across 3 columns.

Spanning Rows

<table>
    <tr>
        <th>Category</th>
        <th>Item</th>
        <th>Price</th>
    </tr>
    <tr>
        <td rowspan="2">Fruits</td>
        <td>Apple</td>
        <td>$1</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.50</td>
    </tr>
</table>

rowspan="2" makes the cell span down 2 rows.

Part 8: Complete Example - Class Schedule

<!DOCTYPE html>
<html>
<head>
    <title>Class Schedule</title>
</head>
<body>
    <h1>My Class Schedule</h1>
    
    <table>
        <thead>
            <tr>
                <th>Time</th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>9:00 AM</td>
                <td>Math</td>
                <td>Science</td>
                <td>Math</td>
                <td>Science</td>
                <td>Math</td>
            </tr>
            <tr>
                <td>10:00 AM</td>
                <td>English</td>
                <td>History</td>
                <td>English</td>
                <td>History</td>
                <td>English</td>
            </tr>
            <tr>
                <td>11:00 AM</td>
                <td colspan="5">Lunch Break</td>
            </tr>
            <tr>
                <td>12:00 PM</td>
                <td>PE</td>
                <td>Art</td>
                <td>PE</td>
                <td>Music</td>
                <td>Art</td>
            </tr>
            <tr>
                <td>1:00 PM</td>
                <td>Computer</td>
                <td>Lab</td>
                <td>Computer</td>
                <td>Lab</td>
                <td>Study Hall</td>
            </tr>
        </tbody>
    </table>
    
    <h2>Class Locations</h2>
    <ul>
        <li>Math - Room 101</li>
        <li>Science - Room 102</li>
        <li>English - Room 201</li>
        <li>History - Room 202</li>
        <li>PE - Gymnasium</li>
        <li>Art - Room 301</li>
        <li>Music - Room 302</li>
        <li>Computer - Lab A</li>
    </ul>
</body>
</html>

Part 9: When to Use Lists vs Tables

Use Lists When:

  • ✅ Showing items in a sequence
  • ✅ Displaying features or benefits
  • ✅ Creating navigation menus
  • ✅ Showing instructions or steps
  • ✅ Listing items that don't need comparison

Use Tables When:

  • ✅ Comparing data across categories
  • ✅ Showing schedules or timetables
  • ✅ Displaying pricing comparisons
  • ✅ Presenting statistics or reports
  • ✅ Data has a clear row/column relationship
Don't use tables for:
  • ❌ Page layout (use CSS instead)
  • ❌ Simple lists
  • ❌ Navigation menus

Practice Exercises

Exercise 1: To-Do List

Create todo.html with:

  • A heading "My To-Do List"
  • An ordered list of at least 5 tasks
  • A nested unordered list under one task showing sub-tasks

Exercise 2: Product Comparison

Create comparison.html with a table comparing 3 smartphones:

  • Headers: Model, Price, Screen Size, Battery, Camera
  • At least 3 rows of data
  • Use proper <thead> and <tbody>

Exercise 3: Recipe Collection

Create recipes.html with:

  • A heading "My Favorite Recipes"
  • An unordered list of 3 recipe names
  • For each recipe:

- A nested ordered list of ingredients

- A nested ordered list of instructions

Exercise 4: Course Catalog

Create courses.html with a table showing:

  • Course name, instructor, days, time, room
  • At least 5 courses
  • Use colspan for a title row
  • Use proper table structure

Common Mistakes

Mistake 1: Forgetting List Item Tags

<ul>
    Apple    <!-- ❌ Missing <li> tags -->
    Banana
</ul>
Fix: 
<ul>
    <li>Apple</li>    <!-- ✅ Proper structure -->
    <li>Banana</li>
</ul>

Mistake 2: Direct Content in Table

<table>
    Name    <!-- ❌ Content directly in table -->
    <tr>
        <td>Alice</td>
    </tr>
</table>
Fix: 
<table>
    <tr>
        <th>Name</th>    <!-- ✅ Content in proper cells -->
    </tr>
    <tr>
        <td>Alice</td>
    </tr>
</table>

Mistake 3: Inconsistent Column Count

<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>City</td>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
        <!-- ❌ Missing third column -->
    </tr>
</table>
Fix: 
<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>City</td>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
        <td>Boston</td>    <!-- ✅ All columns present -->
    </tr>
</table>

Mistake 4: Nested Lists Without Parent `
  • `

    • <ul>
    <li>Item 1</li>
    <ul>    <!-- ❌ Nested list not in <li> -->
        <li>Sub-item</li>
    </ul>
</ul>
    Fix: 
    <ul>
    <li>Item 1
        <ul>    <!-- ✅ Nested list inside parent <li> -->
            <li>Sub-item</li>
        </ul>
    </li>
</ul>

    Quick Reference

    Lists

    <!-- Unordered List -->
<ul>
    <li>Item</li>
</ul>

<!-- Ordered List -->
<ol>
    <li>Item</li>
</ol>

<!-- Nested List -->
<ul>
    <li>Item
        <ul>
            <li>Sub-item</li>
        </ul>
    </li>
</ul>

    Tables

    <table>
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer</td>
        </tr>
    </tfoot>
</table>

    What You Learned

    • ✅ How to create unordered (bulleted) lists
    • ✅ How to create ordered (numbered) lists
    • ✅ How to nest lists inside each other
    • ✅ How to create tables with rows and columns
    • ✅ Proper table structure with thead, tbody, tfoot
    • ✅ How to span columns and rows
    • ✅ When to use lists vs tables
    • ✅ Best practices for organizing data

    What's Next?

    In the next lesson, you'll learn about HTML forms - how to collect user input with text fields, buttons, checkboxes, and more!