What is HTML DOM TableHeader rowSpan Property?

In this article, we will learn HTML DOM TableHeader rowSpan Property,This free HTML tutorial for complete beginners will help you learn HTML from scratch.

HTML DOM TableHeader rowSpan Property - ❤️HTML Tutorials In 2024

Q: How to use HTML DOM TableHeader rowSpan Property in HTML?

The HTML DOM TableHeader rowSpan property is used to set or return the value of the rowspan attribute

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>w3wiki</h2>
    <b>DOM TableHeader rowSpan property</b>
    <table>
        <tr>
            <th id="headerID" rowspan="3"
                abbr="w3wiki">
            Username
            </th>
        </tr>
        <tr>
            <td>Beginner</td>
        </tr>
    </table>
    <br>
    <button onclick="myBeginner()">
        Click Here!
    </button>
    <p id="paraID" style="font-size:25px;color:green">
    </p>
 
 
    <!-- Script to  return the TableHeader rowspan Property -->
    <script>
        function myBeginner() {
            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>w3wiki</h2>
    <b>DOM TableHeader rowSpan Property</b>
    <table>
        <tr>
            <th id="headerID" rowspan="3"
                abbr="w3wiki">
             Username
            </th>
        </tr>
        <tr>
            <td>Beginner</td>
        </tr>
    </table>
    <br>
    <button onclick="myBeginner()">
        Click Here!
    </button>
    <p id="paraID" style="font-size:20px;color:green">
    </p>
 
 
    <!-- script to set TableHeader rowSpan Property -->
    <script>
        function myBeginner() {
            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