Table rulesAttribute
Table Object
Definition and Usage
The rules attribute can set or return the internal borders of a table.
Syntax
Set the rules attribute:
tableObject.rules="none|groups|rows|cols|all"
Return the rules attribute:
tableObject.rules
| Value | Description |
|---|---|
| none | No internal borders |
| groups | Displays internal borders between row groups and column groups |
| rows | Displays internal borders between rows |
| cols | Displays internal borders between columns |
| all | Displays internal borders between rows and columns |
Browser Support
All major browsers support the rules attribute
Note:IE9 can display this attribute correctly. In earlier versions of IE, in addition to the four internal borders, four external borders are also added.
Note:Chrome and Safari can display this attribute correctly: besides the internal borders, it also affects the external borders.
Example
Example
The following example sets two different types of internal borders for the table:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<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 column borders</button>
<p><b>Note:</b> The rules attribute does not display correctly in versions before Internet Explorer 9.</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<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 column borders</button>
<p><b>Note:</b> The rules attribute does not display correctly in versions before Internet Explorer 9.</p>
</body>
</html>
Try it Yourself »
Table Object Other Extensions