HTML DOM TableHeader colSpan Property

Last Updated : 24 Aug, 2022

The HTML DOM TableHeader colSpan property is used to set or return the value of the colspan attribute. The colspan attribute defines the number of columns that a header cell should span.

Syntax:

It returns the colSpan property.

tableheaderObject.colSpan

It is used to set the colSpan property.

tableheaderObject.colSpan = number

Property Values: It contains a single value i.e numeric which represents the number of columns that a header cell should span.

Return Value: It returns a numeric value that represents the number of columns.

Example 1: This example returns a colSpan property.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- style to set border -->
    <style>
        table{
            border:3px solid black;
        }        
        td{
          border: 1px solid green;
          }        
    </style>
</head>
<body>
    <h2>GeeksforGeeks</h2>
    <b>DOM TableHeader colSpan property</b>
    <br/><br/>
    <table>
            <tr> 
                <th id="tableHeaderID" colspan="2">
                    User Expense
                </th> 
            </tr> 
              
            <tr> 
                <td>Arun</td> 
                <td>$10</td> 
            </tr>              
            <tr> 
                <td>Priya</td> 
                <td>$8</td> 
            </tr>
            <tr> 
                <td>Tom</td> 
                <td>$18</td> 
            </tr>

    </table>
    <br>
    <button onclick="myGeeks()">
        Click to get number of columns
    </button>
    <p id="paraID"
       style="font-size:25px;
            color:green">
    </p>


    <!-- script to return TableHeader colSpan Property  -->
    <script>
        function myGeeks() {
            var tab = document.getElementById(
            "tableHeaderID").colSpan;
            document.getElementById(
            "paraID").innerHTML = tab;
        }
    </script>
</body>
</html>

Output:

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

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- style to set border -->
    <style>
        table
        {
         border: 2px solid black;
        }         
                
        td {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <h2>GeeksforGeeks</h2>
    <b>DOM TableHeader colSpan Property</b>
    <br/><br/>
    <table>
            <tr> 
                <th id="tableHeaderID" colspan="2">
                    User Expense
                </th> 
            </tr> 
            <tr> 
                <td>Arun</td> 
                <td>$10</td> 
            </tr>              
            <tr> 
                <td>Priya</td> 
                <td>$8</td> 
            </tr>
            <tr> 
                <td>Tom</td> 
                <td>$18</td> 
            </tr>
    </table>
    <br>
    <button onclick="myGeeks()">
        Click to get value of colspan
    </button>
    <p id="paraID"
       style="font-size:20px;
              color:green">
    </p>


    <!-- script to set TableHeader colSpan Property -->
    <script>
        function myGeeks() {
            var tab = document.getElementById(
            "tableHeaderID").colSpan="4";
            document.getElementById(
            "paraID").innerHTML = 
            "The value of the colspan attribute was changed to:  " 
              + tab;
        }
    </script>
</body>
</html>