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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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



My Personal Notes arrow_drop_up
Recommended Articles
Page :