HTML DOM Table rules Property

Last Updated : 04 Jan, 2022

The HTML DOM Table rules property is used to set or return the value of the rules attribute of the <table> tag. The rules attribute is used to define which part of the borders should be visible.

Note: This property is no longer supported in HTML5.

Syntax

It returns the rules property.

tableObject.rules;

It is used to set the rules of property.

tableObject.rules="values";

Property Values:

none: It does not create any lines.
groups: It creates lines between row and column groups.
rows: It creates lines between the rows.
cols: It creates lines between the columns.
all: It creates lines between the rows and columns.

Example 1: Below HTML code returns the table rules property.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: green;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML DOM Table rules Property</h2>

    <table id="tableID" align="center" rules="rows" 
        summary="courses@GeeksforGeeks" frame="void">
        <thead>
            <tr>
                <th>Subject</th>
                <th>Courses</th>
            </tr>
        </thead>
        <tr>
            <td>Java</td>
            <td>Fork Java</td>
        </tr>
        <tr>
            <td>Python</td>
            <td>Fork Python</td>
        </tr>
        <tr>
            <td>Placements</td>
            <td>Sudo Placement</td>
        </tr>
    </table>
    <br>

    <button ondblclick="dblClick()">
        Return
    </button>
    
    <p id="paraID"></p>

    <script>
        function dblClick() {
            var w = document.getElementById("tableID").rules;
            document.getElementById("paraID").innerHTML = w;
        }
    </script>
</body>

</html>

Output:

Example 2: Below HTML code illustrates how to set the rules property.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: green;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML DOM Table rules Property</h2>

    <table id="tableID" align="center" rules="rows" 
        summary="courses@GeeksforGeeks" frame="void">

        <thead>
            <tr>
                <th>Subject</th>
                <th>Courses</th>
            </tr>
        </thead>
        <tr>
            <td>Java</td>
            <td>Fork Java</td>
        </tr>
        <tr>
            <td>Python</td>
            <td>Fork Python</td>
        </tr>
        <tr>
            <td>Placements</td>
            <td>Sudo Placement</td>
        </tr>
    </table>
    <br>

    <button ondblclick="dblClick()">
        Return
    </button>

    <p id="paraID"></p>

    <script>
        function dblClick() {
            var w = document.getElementById(
                "tableID").rules = "cols";
                
            document.getElementById(
                "paraID").innerHTML = w;
        }
    </script>
</body>

</html>