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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > span (col, colgroup)

span property (col, colgroup)

Browser support:

Specifies or returns the number of columns in a column group that share the settings defined in the col element.

The col and colgroup elements are useful if you want to use the same settings (align, class, style...) for all table cells in the current column.

Syntax:

object.span;

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

This property is read/write.

HTML page for this property: span

Possible values:

Integer that sets or retrieves the numer of columns. Default: 1.

Default: 1.

Example HTML code 1:

This example illustrates the use of the span attribute:

<table border="1px">
    <col style="background-color: #a0f0a0;" />
    <col span="2" style="background-color: #a0a0f0;" />
    <tbody>
        <tr>
            <td>Apple</td>
            <td>$5</td>
            <td>$10.7</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>$10.50</td>
            <td>$8.20</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>$23.30</td>
            <td>$19.45</td>
        </tr>
    </tbody>
</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 span property:

<head>
    <script type="text/javascript">
        function SwapColGroups () {
            var table = document.getElementById ("myTable");
            var cols = table.getElementsByTagName ("col");
            var store = cols[0].span;
            cols[0].span = cols[1].span;
            cols[1].span = store;
        }
    </script>
</head>
<body>
    <button onclick="SwapColGroups ()">Swap colomn groups</button>
    <br /><br />
    <table id="myTable" border="1px">
        <col style="background-color: #a0f0a0;" />
        <col span="2" style="background-color: #a0a0f0;" />
        <tbody>
            <tr>
                <td>Apple</td>
                <td>$5</td>
                <td>$10.7</td>
            </tr>
            <tr>
                <td>Pear</td>
                <td>$10.50</td>
                <td>$8.20</td>
            </tr>
            <tr>
                <td>Peach</td>
                <td>$23.30</td>
                <td>$19.45</td>
            </tr>
        </tbody>
    </table>
</body>