HTML Lists & Tables Explained with Examples | Web Development for Beginners

📘 Day 3: HTML Lists & Tables

In today's lesson, you’ll learn how to organize content using lists and present data using tables.

---

📋 Lists in HTML

HTML offers two main types of lists:

• Unordered List – uses <ul> and shows bullet points
• Ordered List – uses <ol> and shows numbers

🔹 Unordered List Example

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

🔸 Ordered List Example

<ol>
  <li>Wake up</li>
  <li>Learn HTML</li>
  <li>Practice code</li>
</ol>

📊 Tables in HTML

Tables display data in rows and columns using:

• <table> – wraps the entire table
• <tr> – table row
• <th> – table header (bold/centered)
• <td> – table data cell

📌 Table Example

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>22</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>20</td>
  </tr>
</table>

Tip: Use border="1" for basic table borders (for now). Styling will improve later with CSS.

🧪 Practice Task

• Create a grocery list using <ul>
• Create a top 3 goals list using <ol>
• Create a table of your favorite 3 books with columns: Title & Author

🚀 What’s Next?

In Day 4, you'll learn about HTML Forms – text fields, checkboxes, and submit buttons.

Coming Soon: Day 4 - HTML Forms