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

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

scope property (td, th)

Browser support:

Sets or retrieves the type of header information that belongs to a table cell.

This property contains information for the author only, there isn't any functionality assigned to this property.

Syntax:

object.scope;

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

This property is read/write.

HTML page for this property: scope

Possible values:

String that sets or retrieves the type of the header information.

One of the following values:

row

The current cell provides header information for the rest of the row that contains it.

col

The current cell provides header information for the rest of the column that contains it.

rowgroup

The header cell provides header information for the rest of the row group that contains it.

colgroup

The header cell provides header information for the rest of the column group that contains it.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the scope attribute:

<table border="3px" rules="cols">
    <tr>
        <th>Fruit</th>
        <th>Cost</th>
    </tr>
    <tr>
        <td scope="row">Apple</td>
        <td>$5</td>
    </tr>
    <tr>
        <td scope="row">Pear</td>
        <td>$10.50</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 scope property:

<head>
    <script type="text/javascript">
        function GetScope () {
            var table = document.getElementById ("myTable");

            if ('scope' in table.cells[2]) {
                alert ("The value of the scope property in the first cell of the second row: " + table.cells[2].scope);
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <table id="myTable" border="3px" rules="cols">
        <tr>
            <th>Fruit</th>
            <th>Cost</th>
        </tr>
        <tr>
            <td scope="row">Apple</td>
            <td>$5</td>
        </tr>
        <tr>
            <td scope="row">Pear</td>
            <td>$10.50</td>
        </tr>
    </table>

    <button onclick="GetScope ();">Get scope!</button>
</body>