Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Column span Property

  • Difficulty Level : Basic
  • Last Updated : 28 Feb, 2019

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 formMethod 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 illostrate 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>

    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

    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 :