Open In App

HTML DOM TableHeader colSpan Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:

colSpan property

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>


Output: 

colSpan property

Supported Browsers:

  • Google chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari


Last Updated : 24 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads