HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Table rules Property

Table Object Reference Table Object

Definition and Usage

The rules property sets or returns which inner-borders (between the cells) that should be displayed in a table.

Syntax

Set the rules property:

tableObject.rules="none|groups|rows|cols|all"

Return the rules property:

tableObject.rules

Value Description
none No inner-borders are displayed
groups Inner-borders are displayed between row groups and column groups
rows Inner-borders are displayed between rows
cols Inner-borders are displayed between columns
all Inner-borders are displayed between rows and columns


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The rules property is supported in all major browsers.

Note: IE9 displays this property correctly. Earlier versions of IE adds the four outside borders in addition to the inside borders.

Note: Chrome and Safari displays this property incorrectly: They add the affected outside borders in addition to the inside borders.


Example

Example

Set two different inner-borders of a table:

<html>
<head>
<script>
function rows()
{
document.getElementById('myTable').rules="rows";
}
function cols()
{
document.getElementById('myTable').rules="cols";
}
</script>
</head>
<body>

<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<br>
<button type="button" onclick="rows()">Show only row borders</button>
<button type="button" onclick="cols()">Show only col borders</button>

</body>
</html>

Try it yourself »


Table Object Reference Table Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE