🎯 Learning Objectives

By the end of this class, students will:

  1. Understand the purpose of using tables in HTML.
  2. Learn how to use table-related tags (<table>, <tr>, <th>, <td>, <caption>).
  3. Differentiate between header cells and data cells.
  4. Learn how to merge cells using colspan and rowspan.
  5. Understand table borders and basic styling.
  6. Create a simple data table for practice (e.g., marksheet or product list).

🧩 Part 1: What Is a Table in HTML?

Concept:

Tables are used to display data in rows and columns — just like an Excel sheet.

Each row (<tr>) contains cells, which can be either header cells (<th>) or data cells (<td>).

Basic Syntax:

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

images.jpg

🧱 Basic Example

<!DOCTYPE html>
<html>
  <head>
    <title>Student Marks Table</title>
  </head>
  <body>
    <table>
     <caption>Student Marks</caption>
      <tr>
        <th>Name</th>
        <th>Subject</th>
        <th>Marks</th>
      </tr>
      <tr>
        <td>Ali</td>
        <td>Math</td>
        <td>85</td>
      </tr>
      <tr>
        <td>Ayesha</td>
        <td>English</td>
        <td>90</td>
      </tr>
    </table>
  </body>
</html>

🎨 Table Attributes and Basic Styling