Related Articles

Related Articles

HTML | DOM ColumnGroup span Property
  • Difficulty Level : Basic
  • Last Updated : 28 Mar, 2019

The ColumnGroup span Property in HTML DOM is used to set or return the value of the span attribute of a colgroup element. The span attribute is used to define the number of column that a <colgroup> element should span.

Syntax:

  • It returns the ColumnGroup span property.
    columngroupObject.span
  • It is used to set the ColumnGroup span property.
    columngroupObject.span = number

Property Values: It contains single value number which specify the number of <colgroup> should span.

Return value: It returns a string value which represents the number of columns.

Example 1: This example returns the span property.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <title
        HTML DOM ColumnGroup span property 
    </title
  
    <style
        #myColGroup { 
            background: green; 
        
        table { 
            color: white; 
            margin-left: 180px; 
            background: yellow; 
        
        #Geek_p { 
            color: green; 
            font-size: 30px; 
        
        td { 
            padding: 10px; 
        
    </style
</head
  
<body style="text-align:center;"
  
    <h1 style="color:green;"
            GeeksForGeeks 
        </h1
  
    <h2>HTML | DOM ColumnGroup span Property</h2>
      
    <table
        <colgroup id="myColGroup" span="2"></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 to use ColumnGroup span Property -->
    <script
        function myGeeks() { 
            var x = document.getElementById("myColGroup").span; 
            document.getElementById("Geek_p").innerHTML = x; 
        
    </script
</body
  
</html>                    

chevron_right


Output:
Before Clicking the Button:

After Clicking the Button:

Example 2: This example sets the span Property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <title
        HTML | DOM ColumnGroup span property 
    </title
  
    <style
        #myColGroup { 
            background: green; 
        
        table { 
            color: white; 
            margin-left: 180px; 
            background: yellow; 
        
        #Geek_p { 
            color: green; 
            font-size: 30px; 
        
        td { 
            padding: 10px; 
        
    </style
</head
  
<body style="text-align:center;"
  
    <h1 style="color:green;"
            GeeksForGeeks 
        </h1
  
    <h2>HTML | DOM ColumnGroup span Property</h2
      
    <table
        <colgroup id="myColGroup" span="2"
        </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 to use DOM ColumnGroup span Property -->
    <script
        function myGeeks() { 
            var x = document.getElementById("myColGroup").span
                    = "4"; 
            document.getElementById("Geek_p").innerHTML
                    = "The value of the span attribute was"
                    + " changed to " + x; 
        
    </script
</body
  
</html>                    

chevron_right


Output:
Before Clicking the Button:

After Clicking the Button:

Supported Browsers: The browser supported by DOM Colgroup span property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :