Skip to content
Related Articles

Related Articles

HTML DOM TableHeader rowSpan Property

Improve Article
Save Article
  • Last Updated : 24 Aug, 2022
Improve Article
Save Article

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  return the TableHeader rowspan Property -->
    <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 set TableHeader rowSpan Property -->
    <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
Related Articles

Start Your Coding Journey Now!