Skip to content
Related Articles

Related Articles

Improve Article

HTML DOM TableHeader rowSpan Property

  • Last Updated : 31 Aug, 2021

The HTML DOM TableHeader rowSpan property is used to set or return the value of the rowspan attribute. The rowspan attribute in HTML specifies the number of rows a cell should span. 

Syntax:

  • It returns the rowspan property.
tableheaderObject.rowSpan
  • It is used to set the rowSpan property.
tableheaderObject.rowSpan = number

Property Values: It contains the value i.e number which specifies the number of rows a cell should span.

Return Values: It returns a numeric value that represents the number of rows a cell should span.

Example 1: This example returns a rowspan property.



HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- style to set border -->
    <style>
        table,       
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
 
    <b>DOM TableHeader rowSpan property</b>
    <table>
        <tr>
            <th id="headerID" rowspan="3"
                abbr="GeeksforGeeks">
            Username
            </th>
        </tr>
 
        <tr>
            <td>geeks</td>
        </tr>
    </table>
    <br>
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <p id="paraID" style="font-size:25px;color:green">
    </p>
 
 
    <!-- Script to access th element -->
    <script>
        function myGeeks() {
            var tab = document.getElementById("headerID").rowSpan;
            document.getElementById("paraID").innerHTML = tab;
        }
    </script>
</body>
 
</html>

Output:

Example 2: Below code is used to set the rowSpan property. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- style to set border -->
    <style>
        table,       
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
 
    <h2>GeeksforGeeks</h2>
 
    <b>DOM TableHeader rowSpan Property</b>
    <table>
        <tr>
            <th id="headerID" rowspan="3"
                abbr="GeeksforGeeks">
             Username
            </th>
        </tr>
        <tr>
            <td>geeks</td>
        </tr>
    </table>
    <br>
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <p id="paraID" style="font-size:20px;color:green">
    </p>
 
 
    <!-- script to access th element -->
    <script>
        function myGeeks() {
            var tab =
            document.getElementById("headerID").rowSpan = "2";
            document.getElementById("paraID").innerHTML
            = "The value of the rowspan attribute was changed to : " + tab;
        }
    </script>
</body>
 
</html>

Output 

Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Opera
  • Firefox
  • Apple Safari

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 :