HTML Lists and Tables📋

1️⃣ Lists in HTML

Lists are used to group related items. There are two main types:

• 🔵 Unordered List (<ul>): Bulleted list
• 🔢 Ordered List (<ol>): Numbered list

Example: Unordered List

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

• Apple 🍎
• Banana 🍌

Example: Ordered List

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

1. First
2. Second

2️⃣ Nested Lists 🌳

You can nest lists inside other lists to show hierarchy.

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

• Fruits 🍎
  • Apple
  • Banana
• Vegetables 🥦
  • Carrot
  • Broccoli

3️⃣ Tables in HTML 📊

Tables organize data in rows and columns. Main tags:

• 📦 <table>: Table container
• 📏 <tr>: Table row
• 🔠 <th>: Table header cell
• 🔢 <td>: Table data cell

Example: Simple Table

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

Example: Table with Row and Column Span

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Scores</th>
  </tr>
  <tr>
    <td>Math</td>
    <td>Science</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>90</td>
    <td>95</td>
  </tr>
</table>