Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

rules attribute | rules property

Sets or retrieves which dividing lines (inner borders) are displayed.

Syntax

HTML<element rules="p" ... >
JavaScript

p = object.rules

 

Property values

Type: String

all

Borders are displayed on all rows and columns.

cols

Borders are displayed between all table columns.

groups

Horizontal borders are displayed between all tHead, tBody, and tFoot objects; vertical borders are displayed between all colGroup objects.

none

All interior table borders are removed.

rows

Horizontal borders are displayed between all table rows.

Remarks

The value none turns off only the interior borders. To turn off the table borders, set the rules property to '', or omit the rules attribute from the table object.

Examples

This example initially sets the rules attribute on the table, and then uses the rules property to dynamically change the table borders.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rules.htm


<table id="oID_1" rules="cols">
  <thead>
	<tr>
	  <td>EST</td>
	  <td>1am</td>
	  <td>8pm</td>
	</tr>
  </thead>
  <tr>
	<td>CST</td>
	<td>2am</td>
	<td>9pm</td>
  </tr>
  <tr>
	<td>MST</td>
	<td>3am</td>
	<td>10pm</td>
  </tr>
  <tfoot>
	<tr>
	  <td>PST</td>
	  <td>4am</td>
	  <td>11pm</td>
	</tr>
  </tfoot>
</table>
<p><button onclick="oID_1.rules=''">No borders</button>
<button onclick="oID_1.rules='none'">Exterior border</button>
<button onclick="oID_1.rules='all'">All borders</button><br>
<button onclick="oID_1.rules='cols'">Column borders</button>
<button onclick="oID_1.rules='groups'">Groups borders</button>
<button onclick="oID_1.rules='rows'">Table row borders</button></p>


In this example, the table object contains the rules attribute set to cols and the border attribute set to an empty string (""). This example demonstrates that if the rules attribute is set to an empty string (""), the border attribute will cause the table to show all borders, trumping the rules attribute.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/table_rules_border.htm


<table id="oID_1" border="" rules="cols">
  <thead>
	<tr>
	  <td>EST</td>
	  <td>1am</td>
	  <td>8pm</td>
	</tr>
  </thead>
  <tr>
	<td>CST</td>
	<td>2am</td>
	<td>9pm</td>
  </tr>
  <tr>
	<td>MST</td>
	<td>3am</td>
	<td>10pm</td>
  </tr>
  <tfoot>
	<tr>
	  <td>PST</td>
	  <td>4am</td>
	  <td>11pm</td>
	</tr>
  </tfoot>
</table>
<p><button onclick="oID_1.rules=''">No borders</button>
<button onclick="oID_1.rules='none'">Exterior border</button>
<button onclick="oID_1.rules='all'">All borders</button><br>
<button onclick="oID_1.rules='cols'">Column borders</button>
<button onclick="oID_1.rules='groups'">Groups borders</button>
<button onclick="oID_1.rules='rows'">Table row borders</button></p>


See also

table
frame

 

 

Show:
© 2014 Microsoft