Skip to main content
HTML for Beginners
CHAPTER 04 Beginner

HTML Lists and Tables

Updated: May 10, 2026
20 min read

1. Introduction

Welcome to Chapter 4! Content on the web isn't always just paragraphs. Often, we need to present organized lists of items or multi-dimensional data grids. In this chapter, you will master HTML Lists and Tables.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Create unordered (bulleted) and ordered (numbered) lists.
  • Nest lists within other lists.
  • Build structured HTML tables with rows, columns, and headers.
  • Merge table cells using colspan and rowspan.

3. Unordered Lists

An unordered list is used when the sequence of items does not matter (like a grocery list). It uses bullet points.
  • <ul>: Defines the Unordered List.
  • <li>: Defines a List Item inside the list.
html
123456 
<!-- Example 1: Unordered List -->
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

4. Ordered Lists

An ordered list is used when the sequence matters (like step-by-step instructions). It automatically numbers the items.
  • <ol>: Defines the Ordered List.
html
123456 
<!-- Example 2: Ordered List -->
<ol>
  <li>Preheat the oven.</li>
  <li>Mix the ingredients.</li>
  <li>Bake for 30 minutes.</li>
</ol>

5. Description Lists

Description lists are used for dictionaries or key-value pairs.
  • <dl>: Description List.
  • <dt>: Description Term (the key).
  • <dd>: Description Details (the value).
html
1234567 
<!-- Example 3: Description List -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

6. Nested Lists

You can put a list inside another list! This is perfect for complex menus or multi-level outlines.
html
12345678910 
<!-- Example 4: Nested List -->
<ul>
  <li>Beverages
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
    </ul>
  </li>
  <li>Snacks</li>
</ul>

7. HTML Tables Basics

Tables are used to display tabular data in rows and columns (like an Excel sheet).
  • <table>: The container for the entire table.
  • <tr>: Table Row.
  • <th>: Table Header cell (bold and centered by default).
  • <td>: Table Data cell (regular text).
html
123456789101112131415 
<!-- Example 5: Basic Table -->
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

8. Semantic Table Sections

For better organization and styling, group table rows using <thead>, <tbody>, and <tfoot>.
html
123456789101112131415161718192021 
<!-- Example 6: Semantic Table -->
<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$1000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <th>$1000</th>
    </tr>
  </tfoot>
</table>

9. Colspan and Rowspan

Sometimes a cell needs to span across multiple columns or multiple rows.
  • colspan="2": Merges 2 columns horizontally.
  • rowspan="2": Merges 2 rows vertically.
html
123456789101112131415161718192021 
<!-- Example 7: Colspan -->
<table border="1">
  <tr>
    <th colspan="2">Employee Details</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>John Doe</td>
  </tr>
</table>

<!-- Example 8: Rowspan -->
<table border="1">
  <tr>
    <th rowspan="2">Contact</th>
    <td>Email: test@test.com</td>
  </tr>
  <tr>
    <td>Phone: 123-456</td>
  </tr>
</table>

10. Table Captions

You can add a title to a table using the <caption> tag. It must be the first child of the <table> element.
html
12345 
<!-- Example 9: Caption -->
<table>
  <caption>Monthly Sales Report</caption>
  <tr><th>Month</th><th>Sales</th></tr>
</table>

11. Best Practices & Common Mistakes

Best Practices:
  • Use Tables ONLY for tabular data (numbers, schedules, reports).
  • NEVER use tables to design the layout of your webpage (use CSS Flexbox/Grid for that).

Common Mistakes:

  • Forgetting to wrap <td> or <th> inside a <tr>.
  • Mismatched colspan calculations, causing the table layout to visually break.

12. Mini Project: Student Report Card

Task: Build a tabular report card with merged headers.
html
123456789101112131415161718192021222324252627282930313233343536 
<!-- Example 10: Mini Project -->
<!DOCTYPE html>
<html>
<body>
  <h2>Semester Report Card</h2>
  <table border="1" width="100%">
    <thead>
      <tr>
        <th>Subject</th>
        <th>Theory Mark</th>
        <th>Practical Mark</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Physics</td>
        <td>75</td>
        <td>20</td>
        <td>95</td>
      </tr>
      <tr>
        <td>Math</td>
        <td colspan="2">Exempted</td>
        <td>-</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="3">Overall Grade</th>
        <th>A+</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

13. MCQ Quiz

  1. 1. Which tag creates a numbered list?
  • A) <ul>
  • B) <ol>
  • C) <li>
  • D) <list>
Answer: B
  1. 2. What does the <tr> tag define in a table?
  • A) Table Row
  • B) Table Record
  • C) Table Rule
  • D) Table Header
Answer: A
  1. 3. Which attribute merges two columns into one?
  • A) rowspan
  • B) merge
  • C) colspan
  • D) span
Answer: C

14. Interview Questions

Q: When should you NOT use HTML tables? A: You should never use HTML tables for constructing webpage layouts. In the early 2000s, developers used tables to build sidebars and headers, but this is terrible for accessibility, responsiveness, and SEO. Tables are strictly for displaying 2D tabular data.

Q: Explain the difference between <th> and <td>. A: <th> is used for table header cells; it denotes what a column or row represents, and is rendered bold and centered by default. <td> is used for standard data cells.

15. Summary

You've mastered organizing data! You can now build clean, nested lists and create complex data tables featuring merged columns and semantic segments like <thead> and <tfoot>.

16. Next Chapter Recommendation

Next, we tackle one of the most interactive parts of HTML: Forms! You'll learn how to capture user input, create logins, and build dropdowns in Chapter 5.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Links and Images
Next Chapter HTML Forms and Input Elements

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1