HTML DOM TableHead Object: Accessing Table Header Cell Elements

The HTML DOM TableHead object represents the <thead> element in HTML. It provides a way for JavaScript to access and manipulate the header section of a table, particularly the header cells (<th> elements). This guide will explore the properties and methods of the TableHead object, along with practical examples to demonstrate its usage.

Understanding the TableHead Object

In HTML tables, the <thead> element is used to group the header content. It usually contains <tr> elements, which in turn contain <th> (table header) cells. The TableHead object in the DOM allows you to:

• Access the <thead> element itself.
• Retrieve and manipulate the rows within the header.
• Work with individual header cells.

Syntax

To access the TableHead object, you first need to get the table element using its ID and then access its tHead property.

const table = document.getElementById("yourTableId");
const tableHead = table.tHead;

Key Properties of TableHead Object

The TableHead object has several useful properties that help you work with the header section of a table:

` elements in the `

` section. This is a live collection, meaning changes to the DOM will be reflected in the collection automatically.` element, which is typically the table element.`, which are typically `

` elements.` element.` element.` element.` element including the `

` tag itself.

Property	Type	Description
`rows`	HTMLCollection	Returns an HTMLCollection of all the `
`parentElement`	HTMLElement	Returns the parent element of the `
`children`	HTMLCollection	Returns a live HTMLCollection of the direct child elements of the `
`id`	String	Gets or sets the ID of the `
`className`	String	Gets or sets the value of the `class` attribute of the `
`innerHTML`	String	Gets or sets the HTML content of the `
`outerHTML`	String	Gets or sets the HTML content of the `

Note: The HTMLCollection is a live collection. Changes to the DOM are immediately reflected in the collection. 💡

Accessing Rows and Header Cells

You can access the rows within the header using the rows property and then access individual cells within those rows:

const table_ex = document.getElementById("myTable");
const tableHead_ex = table_ex.tHead;
if (tableHead_ex) {
  const firstRow = tableHead_ex.rows[0];
    if (firstRow) {
        const firstCell = firstRow.cells[0];
        console.log(firstCell.textContent); // Output: Name
    }
}

Note: Make sure to check if tableHead exists and the rows and cells are not empty to avoid errors. ⚠️

Examples

Let’s explore some examples to demonstrate how to use the TableHead object effectively.

Example 1: Getting the Number of Header Rows

This example demonstrates how to get the number of rows in the <thead> section of a table.

<table id="tableRows">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
          <th></th>
          <th></th>
          <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>New York</td>
        </tr>
    </tbody>
</table>

<p id="rowInfo"></p>

<script>
    const table_row = document.getElementById("tableRows");
    const tableHead_row = table_row.tHead;
    if (tableHead_row) {
      const rowCount = tableHead_row.rows.length;
      document.getElementById("rowInfo").textContent = "Number of header rows: " + rowCount;
    }
</script>

Output:

This example gets the number of header rows by using the rows property and prints it on the page.

Example 2: Accessing Header Cell Content

This example demonstrates how to access the content of the first header cell (<th>) in the first header row.

<table id="tableCellContent">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>New York</td>
    </tr>
  </tbody>
</table>

<p id="cellInfo"></p>

<script>
    const table_cell = document.getElementById("tableCellContent");
    const tableHead_cell = table_cell.tHead;
    if (tableHead_cell && tableHead_cell.rows.length > 0) {
        const firstRow_cell = tableHead_cell.rows[0];
      if (firstRow_cell && firstRow_cell.cells.length > 0) {
         const firstCell_cell = firstRow_cell.cells[0];
        document.getElementById("cellInfo").textContent = "First header cell content: " + firstCell_cell.textContent;
       }
   }
</script>

Output:

This code retrieves the content of the first cell and displays it on the page.

Example 3: Changing the Header Background Color

This example demonstrates how to change the background color of the entire table header section using the style property.

<table id="tableHeaderStyle">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>New York</td>
    </tr>
  </tbody>
</table>

<button id="changeColor">Change Header Color</button>

<script>
 const table_style = document.getElementById("tableHeaderStyle");
 const tableHead_style = table_style.tHead;
    document.getElementById("changeColor").addEventListener("click", function() {
       if(tableHead_style){
            tableHead_style.style.backgroundColor = "lightblue";
       }
    });
</script>

Output:

This code adds a button that, when clicked, changes the background color of the table header section to light blue.

Example 4: Iterating Through Header Cells

This example shows how to iterate through all header cells in the table header and log their content to the console.

<table id="tableHeaderIterate">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
    <tr>
        <th>Position</th>
        <th>Salary</th>
        <th>Join Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>New York</td>
    </tr>
  </tbody>
</table>

<script>
  const table_iterate = document.getElementById("tableHeaderIterate");
  const tableHead_iterate = table_iterate.tHead;
  if (tableHead_iterate) {
      for (let i = 0; i < tableHead_iterate.rows.length; i++) {
            const row_iterate = tableHead_iterate.rows[i];
          for (let j = 0; j < row_iterate.cells.length; j++) {
                console.log(row_iterate.cells[j].textContent);
        }
    }
  }
</script>

Output:

This code logs the content of each header cell to the console. (Open your browser’s developer console to see the output.)

Browser Support

The TableHead object and its properties are supported in all modern browsers.

Note: It’s always good to verify on older browsers if you are supporting them. 🧐

Conclusion

The HTML DOM TableHead object is essential for accessing and manipulating the header section of HTML tables. By using its properties and methods, you can dynamically control the header content, style, and structure. This guide has provided practical examples that demonstrate the versatility of the TableHead object. By incorporating these techniques, you can create more interactive and user-friendly web applications.