` tags and wrapped in a code block with `` tags: ```html Using Multiple Elements in HTML Tables

Purpose of <tbody>:

The <tbody> tag signifies the main content area of an HTML table. It groups table rows containing the data you want to display.

Using Multiple <tbody> elements:

While HTML allows for just one <thead> (table header) per table, you can have multiple <tbody> elements. These elements need to appear consecutively within the <table> structure.

• Organization in Large Tables: Splitting a large table into multiple <tbody> sections enhances readability and maintainability.
• Independent Formatting: You can apply different styles (like fonts or backgrounds) to each <tbody> element, creating visual distinction within the table.
• Selective Manipulation: With scripting languages like JavaScript, you can target and manipulate specific <tbody> sections for features like hiding or showing content.

Example:

Imagine a table displaying product information with separate sections for electronics and clothing. You could structure it like this:

<table>
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Phone</td>
      <td>Latest smartphone with amazing features</td>
      <td>$500</td>
    </tr>
    </tbody>

  <tbody>
    <tr>
      <td>T-Shirt</td>
      <td>Comfortable cotton T-Shirt</td>
      <td>$15</td>
    </tr>
    </tbody>
</table>

This approach keeps the table organized and allows for potential future styling differences between the electronics and clothing sections.

Example 1: Splitting a Table by Category

This example shows a table with product information divided into "Electronics" and "Clothing" categories:

<table>
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>Category</th>
      <th colspan="2">Electronics</th> </tr>
    <tr>
      <td>Phone</td>
      <td>Latest smartphone with amazing features</td>
      <td>$500</td>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>Powerful laptop for work and play</td>
      <td>$800</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <th>Category</th>
      <th colspan="2">Clothing</th>
    </tr>
    <tr>
      <td>T-Shirt</td>
      <td>Comfortable cotton T-Shirt</td>
      <td>$15</td>
    </tr>
    <tr>
      <td>Jeans</td>
      <td>Durable and stylish jeans</td>
      <td>$40</td>
    </tr>
  </tbody>
</table>

Example 2: Highlighting Rows with Different Background Colors

This example demonstrates using separate <tbody> elements to style rows with different background colors:

<style>
  .electronics tbody tr { background-color: #f5f5f5; }
  .clothing tbody tr { background-color: #e0e0e0; }
</style>

<table>
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody class="electronics">
    <tr>
      <td>Phone</td>
      <td>Latest smartphone with amazing features</td>
      <td>$500</td>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>Powerful laptop for work and play</td>
      <td>$800</td>
    </tr>
  </tbody>

  <tbody class="clothing">
    <tr>
      <td>T-Shirt</td>
      <td>Comfortable cotton T-Shirt</td>
      <td>$15</td>
    </tr>
    <tr>
      <td>Jeans</td>
      <td>Durable and stylish jeans</td>
      <td>$40</td>
    </tr>
  </tbody>
</table>

1. CSS Selectors:

• You can leverage CSS selectors with various table-related attributes to target and style specific rows or groups of rows within the table. This approach can be more concise for simple styling needs.

Here's an example:

<table>
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Phone</td>
      <td>Latest smartphone with amazing features</td>
      <td>$500</td>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>Powerful laptop for work and play</td>
      <td>$800</td>
    </tr>
    <tr>
      <td>T-Shirt</td>
      <td>Comfortable cotton T-Shirt</td>
      <td>$15</td>
    </tr>
    <tr>
      <td>Jeans</td>
      <td>Durable and stylish jeans</td>
      <td>$40</td>
    </tr>
  </tbody>
</table>

<style>
  /* Style all rows with even index (starting from 0) */
  table tbody tr:nth-child(even) {
    background-color: #f5f5f5;
  }
  
  /* Style rows containing "Phone" in the Product Name */
  table tbody tr:first-child,  /* Target the first row */
  table tbody tr td:nth-child(1):contains("Phone") {  /* Target cells containing "Phone" in the first column */
    background-color: #e0e0e0;
  }
</style>

1. JavaScript Manipulation:

• If you require dynamic control over the table content or styling based on user interaction or data, you can utilize JavaScript. This method offers more flexibility but requires scripting knowledge.

Here's a basic example (note: this is a simplified demonstration, error handling may be needed in a real-world scenario):

<script>
function changeBackgroundColor(category) {
  const tableBody = document.querySelector(`tbody[data-category="${category}"]`);
  if (tableBody) {
    tableBody.style.backgroundColor = "#f0f0f0";
  }
}
</script>

<table>
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody data-category="electronics">
    <tr>
      <td>Phone</td>
      <td>Latest smartphone with amazing features</td>
      <td>$500</td>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>Powerful laptop for work and play</td>
      <td>$800</td>
    </tr>
  </tbody>

  <tbody data-category="clothing">
    <tr>
      <td>T-Shirt</td>
      <td>Comfortable cotton T-Shirt</td>
      <td>$15</td>
    </tr>
    <tr>
      <td>Jeans</td>
      <td>Durable and stylish jeans</td>
      <td>$40</td>
    </tr>
  </tbody>

  <button onclick="changeBackgroundColor('electronics')">Highlight Electronics</button>
</table>