HTML | DOM Column span Property Last Updated : 07 Jul, 2022 Comments Improve Suggest changes Like Article Like Report 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. html <!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. html <!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> Output: Before Clicking On Button: After Clicking On Button: Supported Browsers: The browser supported by DOM Column span Property are listed below: Google Chrome Internet Explorer Firefox Opera Safari Comment More infoAdvertise with us Next Article HTML | DOM Style columnSpan Property M manaschhabra2 Follow Improve Article Tags : Misc Web Technologies HTML HTML-DOM Practice Tags : Misc Similar Reads HTML | DOM ColumnGroup span Property 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 2 min read HTML | DOM Style columns Property HTML DOM Style columns Property is used to set the width of the column & column count. Syntax: To Return the column property: object.style.columns To Set the column property: object.style.columns= "auto|columnwidth columncount| initial|inherit" Property Values: Auto: Sets both values of width 2 min read HTML | DOM Style columnGap Property The DOM Style columnGap property specifies the gap between the columns. Syntax : For return the value: object.style.columnGap For set the value: object.style.columnGap = "length|normal|initial|inherit" Property Values: length: Set the column gap in length unit. normal: The default value of column ga 4 min read HTML | DOM Style columnSpan Property The DOM style columnspan property is used to specify how many columns an element should span across. Syntax: It return the columnSpan property:object.style.columnSpanIt set the columnSpan property:object.style.columnSpan = "1|all|initial|inherit" Property Values: 1: Default value of the element. Use 3 min read HTML DOM Style columnFill Property The HTML DOM Style columnFill property determines how content is distributed into columns in a multi-column layout. Values like auto or balance control whether columns are filled sequentially or balanced in height. HTML DOM Style columnFill Property SyntaxTo get the columnFill propertyobject.style.c 2 min read HTML DOM Style columnFill Property The HTML DOM Style columnFill property determines how content is distributed into columns in a multi-column layout. Values like auto or balance control whether columns are filled sequentially or balanced in height. HTML DOM Style columnFill Property SyntaxTo get the columnFill propertyobject.style.c 2 min read Like