Skip to content
Related Articles

Related Articles

Improve Article

HTML DOM TableHeader colSpan Property

  • Last Updated : 21 May, 2021

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 access th element -->
    <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 access th element -->
    <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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :