📊 Table-Related Tags in HTML

A table is made of rows and columns. HTML provides special tags for structuring them.

---

1. <tr> – Table Row

• Defines a row in a table.
• Always contains <td> (table data) or <th> (table headers).

👉 Attributes of <tr>:

• align → Aligns content inside the row (left, right, center, justify).
• valign → Vertical alignment (top, middle, bottom).
• bgcolor → Background color of the row (old HTML, now done with CSS).

Example:

<table border="1" width="400">
  <tr align="center" bgcolor="lightblue">
    <th>Roll No</th>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr valign="top">
    <td>1</td>
    <td>Ravi</td>
    <td>85</td>
  </tr>
</table>

---

2. <td> – Table Data Cell

• Defines a cell in a row (normal data).

👉 Attributes of <td>:

• colspan → Merge cells horizontally.
• rowspan → Merge cells vertically.
• align → Horizontal alignment (left, center, right).
• valign → Vertical alignment (top, middle, bottom).
• bgcolor → Background color of cell (deprecated, use CSS).
• width, height → Set size of the cell.

Example:

<table border="1">
  <tr>
    <td rowspan="2">1</td>
    <td>Ravi</td>
    <td>85</td>
  </tr>
  <tr>
    <td colspan="2" align="center">Passed</td>
  </tr>
</table>

👉 Explanation:

• rowspan="2" → merges two rows.
• colspan="2" → merges two columns.

---

3. <th> – Table Header Cell

• Defines a header cell.
• By default, bold + centered.

👉 Attributes of <th> (same as <td>):

• colspan, rowspan
• align, valign
• bgcolor, width, height

Example:

<table border="1" width="400">
  <tr bgcolor="lightgray">
    <th colspan="3" align="center">Exam Results</th>
  </tr>
  <tr>
    <th>Roll No</th>
    <th>Name</th>
    <th>Marks</th>
  </tr>
</table>

---

4. <thead> – Table Head Section

• Groups the header rows of a table.
• Usually contains <tr> with <th>.
• Improves readability & accessibility.
• Can be repeated when printing large tables.

👉 Attributes of <thead>:

• Global attributes only (like align, style, class, id).

Example:

<table border="1" width="400">
  <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>
</table>

---

5. <tfoot> – Table Footer Section

• Defines the footer rows (like totals, summary).
• Appears after <tbody> but can be rendered at the bottom of the table.

👉 Attributes of <tfoot>:

• Global attributes (align, style, id, etc.)

Example:

<table border="1" width="400">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Book</td>
      <td>200</td>
    </tr>
    <tr>
      <td>Pen</td>
      <td>20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>220</td>
    </tr>
  </tfoot>
</table>

---

6. <tbody> – Table Body Section

• Contains the main data rows of the table.
• Groups rows inside the body (separating from header/footer).

👉 Attributes of <tbody>:

• Global attributes only (like align, style, id).

---

📋 Summary Table (Quick Revision)

Tag	Meaning	Common Attributes	Example
<tr>	Table row	align, valign, bgcolor	<tr align="center">...</tr>
<td>	Table data cell	colspan, rowspan, align, valign, width, height, bgcolor	<td colspan="2">Data</td>
<th>	Table header cell	Same as <td>	<th rowspan="2">Name</th>
<thead>	Group header rows	Global attributes	<thead>...</thead>
<tfoot>	Group footer rows	Global attributes	<tfoot>...</tfoot>
<tbody>	Group body rows	Global attributes	<tbody>...</tbody>

---

✅ Complete Example (All Tags Used)

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

  <thead>
    <tr bgcolor="lightblue">
      <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" align="right">Total Students</td>
      <td>2</td>
    </tr>
  </tfoot>
</table>

---

👉 So, these table-related tags (tr, td, th, thead, tfoot, tbody) make HTML tables well-structured, readable, and easier to manage.

---