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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > rules (table)

rules property (table)

Browser support:

Specifies or returns which borders will appear between cells within a table.

This property has effect only when the border property is set as well.

Syntax:

object.rules;

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

This property is read/write.

HTML page for this property: rules

Possible values:

String that sets or retrieves the type of border rules in a table.

One of the following values:

all

Borders on all rows and columns are displayed .

cols

Borders are only displayed between columns.

groups

Horizontal borders between all tHead, tBody, and tFoot objects; vertical borders between all col and colGroup objects are displayed.

none

Borders are not displayed.

rows

Borders are only displayed between rows.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the rules attribute:

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

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

            // Returns the index of the selected option
            var whichSelected = elem.selectedIndex;

            // Returns the text of the selected option
            var ruleType = elem.options[whichSelected].text;

            if ('rules' in table) {
                table.rules = ruleType;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <table id="myTable" border="3px" rules="cols">
        <thead>
            <tr>
                <th>Fruit</th>
                <th>Cost</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Apple</td>
                <td>$5</td>
            </tr>
            <tr>
                <td>Pear</td>
                <td>$10.50</td>
            </tr>
        </tbody>
    </table>

    Set the type of border rules.
    <select onchange="SetRules (this);" size="5">
        <option />all
        <option selected="selected" />cols
        <option />groups
        <option />none
        <option />rows
    </select>
</body>