HTML DOM TableRow cells Collection

Last Updated : 20 Nov, 2021

The HTML DOM TableRow cells Collections is used to return all the total number of cells of a particular row in the table. It includes all the <td> and <th> element. The sequence of the <tr> elements is sorted in the same way as their position in the source code.

Syntax:

tableObject.cells

Properties:

length: It is used to return the number of <td> and <th> element in the collection.

Methods:

[index]: It is used for returning the <td> and <th> element from the collection with a specified index. If the index number is out of range then it will return null.
item(index): It is also used for returning the <td> and <th> element from the collection with a specified index. If the index number is out of range then it will return null.
namedItem(id): It is also used for returning the <td> and <th> element from the collection with a specified id. If the id doesn’t exist then the return value is null.

Return value:- It is used to return all the <td> and <th> element of a particular row in the table.

The below example illustrates the implementation of the TableRow cells collection.

Example:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>TableRow cells Collection in HTML</title>
    <style>
      table,
      td {
        border: 1px solid green;
      }
      h1 {
        color: green;
      }
      h2 {
        font-family: sans-serif;
      }
      body {
        text-align: center;
      }
    </style>
  </head>
 
  <body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML DOM TableRow cells Collection</h2>
     
 
<p>
      To return the number of cells in the table, 
      double-click on the "Return cells" button.
    </p>
 
 
 
    <table id="Courses" align="center">
      <caption>
        GeeksforGeeks Courses
      </caption>
      <tr>
        <td>Front-end Development</td>
        <td>HTML</td>
        <td>CSS</td>
        <td>JS</td>
      </tr>
      <tr>
        <td>Back-end Development</td>
        <td>PHP</td>
        <td>Java</td>
        <td>Python</td>
      </tr>
      <tr>
        <td>Placements Courses</td>
        <td>DSA Algorithms</td>
        <td>Interview questions on Advanced DSA</td>
        <td>Aptitude & Logical Reasoning</td>
      </tr>
    </table>
    <br />
 
    <button onclick="rowCount()">Return Cells</button>
 
    <p id="test"></p>
 
 
 
 
    <script>
      function rowCount() {
         
        // Number of rows.
        var row = document.getElementById("Courses")
            .rows[2].cells.length;
        document.getElementById("test").innerHTML =
          " Number of cells in the 3rd row: " + row;
      }
    </script>
  </body>
</html>