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> 