📋 Day 4 — Lists and Tables in HTML

on

📋 Day 4 — Lists and Tables in HTML

Welcome to Day 4 🎉 You’ve linked pages together; now you’ll learn to display information clearly using lists and tables. Every blog, menu, or product page relies on these structures to keep data organized and easy to scan.

🧩 1️⃣ Unordered Lists

Unordered lists show items without a specific order, using bullets by default.

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

🔢 2️⃣ Ordered Lists

Ordered lists are numbered. Perfect for steps or rankings.

<ol>
  <li>Open VS Code</li>
  <li>Create index.html</li>
  <li>Write HTML structure</li>
</ol>

📑 3️⃣ Nested Lists

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

📋 4️⃣ Description Lists

Use a description list to pair terms with definitions.

<dl>
  <dt>HTML</dt>
  <dd>The structure of web pages.</dd>
  <dt>CSS</dt>
  <dd>The style of web pages.</dd>
</dl>

🧱 5️⃣ Creating Tables

Tables display data in rows and columns. Use them for tabular information — not for layout.

<table border="1" cellspacing="0" cellpadding="8">
  <tr>
    <th>Name</th>
    <th>Language</th>
    <th>Level</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>HTML</td>
    <td>Beginner</td>
  </tr>
  <tr>
    <td>Aisha</td>
    <td>CSS</td>
    <td>Intermediate</td>
  </tr>
</table>

🧩 6️⃣ Table Headers and Captions

<table border="1">
  <caption>Student Languages</caption>
  <tr><th>Name</th><th>Skill</th></tr>
  <tr><td>Rahul</td><td>HTML</td></tr>
</table>

🧠 7️⃣ Practice Task

  1. Create a list of your top five programming languages.
  2. Build a table showing language name, difficulty level, and years of experience.
  3. Add a caption to describe the table.
  4. Try nesting a list inside a table cell for fun!

🧮 Mini Quiz

  • Q1: Which tag creates a numbered list?
  • Q2: What does <th> stand for?
  • Q3: How do you add a caption to a table?

🎯 Summary

Lists and tables help you display structured data clearly — menus, schedules, scores, and so much more. You’ve taken another big step toward building fully functional web pages. Tomorrow you’ll learn how to collect user input through HTML forms!

Comments

Post a Comment