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>
|
Output:
Supported Browsers
- Google Chrome
- Internet Explorer
- Opera
- Apple Safari
- Firefox
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
04 Jan, 2022
Like Article
Save Article