HTML | DOM Column span Property

Last Updated : 07 Jul, 2022

The DOM Column span Property is used to set or return the value of a span attribute of a <column> element. The colspan attribute in HTML specifies the number of columns a cell should span.

Syntax:

It is used to return the span property.
```
columnObject.span
```
It is used to set the Column span property.
```
columnObject.span = number
```

Property Values:

number: It specifies the number of the column that a cell should span. It does not allow negative values.

Return Values: It returns a numeric value which represent the number of columns.

Example-1: This Example that illustrate how to return the column span Property.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Column span Property 
    </title> 
</head> 
<style> 
    #myCol { 
        background: green; 
    } 
      
    table { 
        color: white; 
        margin-left: 150px; 
    } 
      
    #Geek_p { 
        color: green; 
        font-size: 30px; 
    } 
      
    td { 
        padding: 10px; 
    } 
</style> 
  
<body style="text-align:center;"> 
  
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1> 
  
    <h2>HTML | DOM Column span Property</h2> 
    <table> 
        <colgroup> 
          <col id="myCol" span="2"> 
            <col style="background-color:green"> 
        </colgroup> 
        <tr> 
            <th>S.No</th> 
            <th>Title</th> 
            <th>Geek_id</th> 
        </tr> 
        <tr> 
            <td>Geek_1</td> 
            <td>GeekForGeeks</td> 
            <th>Geek_id_1</th> 
        </tr> 
        <tr> 
            <td>Geek_2</td> 
            <td>GeeksForGeeks</td> 
            <th>Geek_id_2</th> 
        </tr> 
    </table> 
    <br> 
    <button onclick="myGeeks()"> 
        Click 
    </button> 
    <h4>  
            <p id="Geek_p"
               style="color:green"> 
      </p>  
        </h4> 
    <script> 
        function myGeeks() { 
            // access col element  
            var x = document.getElementById( 
                "myCol").span; 
            document.getElementById( 
                "Geek_p").innerHTML = x; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before Clicking On Button:

After Clicking In Button:

Example-2: This HTML Example illustrates how to set the column span Property.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Column span Property 
    </title> 
</head> 
<style> 
    #gfg { 
        background: green; 
    } 
      
    table { 
        color: white; 
        margin-left: 150px; 
    } 
      
    #Geek_p { 
        color: green; 
        font-size: 30px; 
    } 
      
    td { 
        padding: 10px; 
    } 
</style> 
  
<body style="text-align:center;"> 
  
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1> 
  
    <h2>HTML | DOM Column span Property</h2> 
    <table> 
        <colgroup> 
          <col id="gfg" span="3"> 
            <col style= 
               "background-color:green"> 
        </colgroup> 
        <tr> 
            <th>S.No</th> 
            <th>Title</th> 
            <th>Geek_id</th> 
        </tr> 
        <tr> 
            <td>Geek_1</td> 
            <td>GeekForGeeks</td> 
            <th>Geek_id_1</th> 
        </tr> 
        <tr> 
            <td>Geek_2</td> 
            <td>GeeksForGeeks</td> 
            <th>Geek_id_2</th> 
        </tr> 
    </table> 
    <br> 
    <button onclick="myGeeks()"> 
        Click 
    </button> 
    <h4>  
            <p id="Geek_p" 
               style="color:green"> 
      </p>  
        </h4> 
    <script> 
        function myGeeks() { 
            // access col element  
            document.getElementById( 
                "gfg").span = 2; 
            document.getElementById("gfg"). 
            style.backgroundColor = "red"; 
  
        } 
    </script> 
</body> 
  
</html> 