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 >
|
Output:
Supported Browsers
- Google Chrome
- Internet Explorer
- Opera
- Apple Safari
- Firefox
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...