📊 Tables in HTML

👉 A table is used in HTML to display data in rows and columns, just like in MS Excel or a notebook. It helps organize information in a structured way.

The basic tag for a table is <table>.

---

🛠 Parts of an HTML Table

An HTML table has several important parts:

1. <table> → defines the table.
2. <tr> (Table Row) → defines a row in the table.
3. <th> (Table Header) → defines a heading cell (bold and centered by default).
4. <td> (Table Data) → defines a normal cell (data cell).
5. <caption> → gives a title/caption for the table.
6. <thead> → groups the header part of the table.
7. <tbody> → groups the main body of the table.
8. <tfoot> → groups the footer part of the table.
9. Attributes like border, cellpadding, cellspacing, colspan, rowspan are used to style and merge cells.

---

✅ Example 1: Simple Table

<table border="1">
  <tr>
    <th>Roll No</th>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Ravi</td>
    <td>85</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Sita</td>
    <td>92</td>
  </tr>
</table>

👉 Here:

• <tr> = rows
• <th> = headings
• <td> = data

---

✅ Example 2: Adding Caption, Thead, Tbody, Tfoot

<table border="1" cellpadding="5" cellspacing="0">
  <caption>
    <b>Class 10 Exam Results</b>
  </caption>

  <thead>
    <tr>
      <th>Roll No</th>
      <th>Name</th>
      <th>Marks</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Ravi</td>
      <td>85</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Sita</td>
      <td>92</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Total Students</td>
      <td>2</td>
    </tr>
  </tfoot>
</table>

👉 Explanation:

• <caption> = Table title.
• <thead> = Heading row (Roll No, Name, Marks).
• <tbody> = Main data (Ravi, Sita).
• <tfoot> = Footer (summary row).
• colspan="2" merges two cells into one.

---

✅ Example 3: Rowspan & Colspan

<table border="1" cellpadding="5">
  <tr>
    <th rowspan="2">Roll No</th>
    <th colspan="2">Student Info</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Ravi</td>
    <td>85</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Sita</td>
    <td>92</td>
  </tr>
</table>

👉 Explanation:

• rowspan="2" → merges 2 rows vertically.
• colspan="2" → merges 2 columns horizontally.

---

🎯 Why Tables are Useful in HTML?

1. Organizing Data → Easy to present marks, schedules, price lists, etc.
2. Clarity → Makes content structured and easy to read.
3. Tabular Information → Perfect for data like exam results, time tables, product lists.
4. Formatting → With CSS, tables can look attractive and professional.
5. Accessibility → Screen readers can interpret table structures for visually impaired users.

---

📝 Quick Summary (Tag → Meaning)

Tag	Meaning
<table>	Defines a table
<tr>	Table row
<th>	Table header (bold + centered)
<td>	Table data cell
<caption>	Title of the table
<thead>	Header section
<tbody>	Body section
<tfoot>	Footer section
rowspan	Merge cells vertically
colspan	Merge cells horizontally

---

👉 So, tables are like grids in HTML – they give us rows and columns to neatly arrange data.

---