HTML Lists & Tables — Organising Data on a Page

Unordered Lists — Bullet Points

Use <ul> when order does not matter (ingredients, features, skills):

<h3>What You Will Learn</h3>
<ul>
  <li>HTML structure</li>
  <li>CSS styling</li>
  <li>JavaScript interactivity</li>
  <li>React for modern apps</li>
</ul>

Ordered Lists — Numbered Steps

Use <ol> when sequence matters (steps, rankings, instructions):

<h3>How to Make Dal Makhani</h3>
<ol>
  <li>Soak black lentils overnight</li>
  <li>Pressure cook for 20 minutes</li>
  <li>Add butter, cream, and spices</li>
  <li>Simmer on low heat for 2 hours</li>
  <li>Serve with naan</li>
</ol>

Nested Lists — Menu with Categories

<ul>
  <li>Starters
    <ul>
      <li>Samosa — Rs.20</li>
      <li>Paneer Tikka — Rs.120</li>
    </ul>
  </li>
  <li>Main Course
    <ul>
      <li>Dal Makhani — Rs.150</li>
      <li>Butter Chicken — Rs.200</li>
    </ul>
  </li>
</ul>

Tables — Grid Data

Use tables for structured data with rows and columns — price comparisons, schedules, results:

Real Example — Pricing Table

<table>
  <thead>
    <tr>
      <th>Plan</th>
      <th>Price</th>
      <th>Best For</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Free</td>
      <td>Rs.0</td>
      <td>Self-learners</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>Rs.499/mo</td>
      <td>Fast learners</td>
    </tr>
  </tbody>
</table>

Do not use tables for layout! In the early 2000s developers used tables to position content. That is outdated and bad practice. Use CSS Flexbox or Grid for layout. Tables are only for tabular data.

Try It Yourself

1. Create a food menu using nested lists with 3 categories
2. Build a comparison table for 3 smartphones: Name, Price, Camera, Battery