In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > colSpan (td, th)

colSpan property (td, th)

Browser support:

Sets or retrieves how many columns wide a cell should be.

If you want to change how many rows high the cell should be, use the rowSpan property.

Syntax:

object.colSpan;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: colSpan

Possible values:

Integer that sets or retrieves the number of columns to span.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the colSpan attribute:

<table border="3px" id="myTable">
    <tr>
        <td colspan="2">Apple</td>
    </tr>
    <tr>
        <td>Pear</td>
        <td>35.21</td>
    </tr>
    <tr>
        <td>Peach</td>
        <td>23.12</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the colSpan property:

<head>
    <script type="text/javascript">
        function ChangeColSpan () {
            var table = document.getElementById ("myTable");
            
            // The first cell of the first row in the table
            var colToSpan = table.rows[0].cells[0].colSpan;

            colToSpan = (colToSpan == 2)? 1 : 2;
            table.rows[0].cells[0].colSpan = colToSpan;
        }
    </script>
</head>
<body>
    <table border="3px" id="myTable">
        <tr>
            <td colspan="2" style="background-color:red;">Apple</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>35.21</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>23.12</td>
        </tr>
    </table>

    <button onclick="ChangeColSpan ();">Change the colSpan property of the first cell!</button>
</body>