Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML DOM TableHeader colSpan Property

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 24 Aug, 2022
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!