HTML | DOM TableData colSpan Property

Last Updated : 23 Aug, 2022

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>
    <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() {
            // return Table data colSpan Property
            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>
    <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() {
            // set Table data colSpan Property
            var x =
                document.getElementById("myTd").colSpan = "5";
 
            document.getElementById("demo").innerHTML =
                "The value of the Colspan " +
                "attribute was changed to "
                + x;
        }
    </script>
</body>
</html>