Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM TableData colSpan Property

  • Difficulty Level : Basic
  • Last Updated : 19 May, 2021

The Dom TableData colSpan Property in HTML DOM is used to set or return the value of a colspan attribute. The colspan attribute is used to specify the number of columns a table should span.

Syntax: 

  • It returns the colSpan property. 
tabledataObject.colSpan
  • It is used to set the colSpan property. 
tabledataObject.colSpan = number

Property Values: It contains the numeric value which specifies the number of columns a cell should span. 

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

Example-1: This Example returns a colspan Property. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
 
<body>
 
    <body>
 
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
 
        <h2>
          DOM TableData Colspan Property
      </h2>
 
        <table>
            <tr>
                <td id="myTd"
                    colspan="3">
                  Geeks
              </td>
                <td>For</td>
                <td>Geeks</td>
            </tr>
        </table>
        <br>
        <button onclick="myFunction()">
            Click Here!
        </button>
 
        <p id="demo"
           style="font-size:24px;
                  colorgreen;">
      </p>
 
 
        <script>
            function myFunction() {
                // Accessing Table data
                var x =
                    document.getElementById(
                      "myTd").colSpan;
                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </body>
 
</html>

Output: 
Before Clicking On Button: 
 

After Clicking On Button: 
 

Example-2: This Example sets the colspan Property. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
 
<body>
 
    <body>
 
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
 
        <h2>
          DOM TableData Colspan Property
      </h2>
 
        <table>
            <tr>
                <td id="myTd"
                    colSpan="3">
                  Geeks
              </td>
                <td>For</td>
                <td>Geeks</td>
            </tr>
        </table>
        <br>
        <button onclick="myFunction()">
            Click Here!
        </button>
 
        <p id="demo"
           style="font-size:24px;
                  colorgreen;">
      </p>
 
 
        <script>
            function myFunction() {
                // Accessing Table data
                var x =
                    document.getElementById("myTd").colSpan = "5";
               
                document.getElementById("demo").innerHTML =
                  "The value of the Colspan "+
                  "attribute was changed to "
                + x;
            }
        </script>
    </body>
 
</html>

Output: 
Before Clicking On Button: 
 

After Clicking On Button: 
 

Supported Browsers: 

  • Google Chrome 
  • Mozilla Firefox 
  • Edge 
  • Opera 
  • Safari 

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!