Quest 1 • Lesson 4

📋 Lists & Tables

Lists and tables help you organise information clearly. HTML provides unordered lists (bullet points), ordered lists (numbers), and tables (rows and columns).

"Use lists for steps, ingredients, or any group of items. Use tables for data that belongs in rows and columns – like a schedule or price list."

unordered.html

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

📌 Unordered vs Ordered Lists

Unordered List (<ul>)

Bullet points
No sequence
Use for shopping lists, features, etc.

Ordered List (<ol>)

Numbers or letters
Sequence matters
Use for steps, rankings, etc.

ordered.html

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Have breakfast</li>
</ol>

📊 HTML Tables

Tables are built row by row:

<table>
  <tr>                 <!-- table row -->
    <th>Name</th>      <!-- table header -->
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>     <!-- table data -->
    <td>25</td>
  </tr>
</table>

Live preview:

Name	Age
Alice	25
Bob	30

✨ Challenge: Create a Timetable

Build a simple table with 3 columns: Day, Subject, Time. Add 3 rows of data (e.g., Monday, HTML, 10am).

<table>
  <tr><th>Day</th><th>Subject</th><th>Time</th></tr>
  <tr><td>Monday</td><td>HTML</td><td>10am</td></tr>
  <tr><td>Wednesday</td><td>CSS</td><td>2pm</td></tr>
</table>

❤️ Support Free Education

This course is 100% free. If it helps you, consider buying me a coffee.

☕ Buy Me a Coffee

➡️ Ready for more?

Next lesson: Forms & Inputs – collect data from users.

Continue to Lesson 1.5 →

(Coming soon – check back or buy Pro Pack for instant access)

Master Code On The Go