Skip to content
Related Articles

Related Articles

Improve Article

HTML DOM TableRow cells Collection

  • Last Updated : 06 Sep, 2021
Geek Week

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.

 



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>Apptitude & 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>

Output:

Supported Browsers:

  • Google Chrome 1.0 & above
  • Internet Explorer 5.5 & above
  • Microsoft Edges 12.0 & above
  • Firefox 1.0 & above
  • Safari 3.0 & above
  • Opera 12.1 & above

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :