Skip to: content, navigation

by Ian Lloyd

rules (HTML attribute)

Browser support full matrix
IE5.5+ FF1+ Saf3+ Op9.2+
Buggy Full Buggy Full
Spec
Depr. Version
No HTML 2
rules=" { all | cols | groups | none | rows } "

Example

The rules attribute for this table is set to "rows":

<table rules="rows">
  <tr>
    <th>Account Type</th>
    <th>Interest Rate</th>
  </tr>
  <tr>
    <td>Smart</td>
    <td>From 2%</td>
  </tr>
  <tr>
    <td>Young Saver</td>
    <td>From 1.6%</td>
  </tr>
</table>

Description

The rules attribute allows you to set borders (also called rules, surprise, surprise!) inside the table at the boundaries between cells. For example, you can set the rules to "rows", as you can see in Figure 1. This practice creates the dividing lines, but doesn’t affect the table’s border (for that, you’d use the frame attribute—the rules attribute’s partner in crime—or the border attribute).

Figure 1. Three tables whose rules attributes are set to "rows", "cols", and "all" Three tables with the rules attribute set to ‘rows’, ‘cols’ and ‘all’

Value

The recognized attribute values are as shown in the syntax section.

Compatibility

IE5.5Buggy
6.0Buggy
7.0Buggy
Firefox1.0Full
1.5Full
2.0Full
Safari1.3None
2.0None
3.0Buggy
Opera9.2Full

Most browsers tested do something with this attribute's values (with the exception of Safari 1 and 2, which ignore them completely), but there were still some problems. Internet Explorer insists on adding a border around the table, not just to the boundaries between table cells; Safari 3 doesn’t apply a border around the table, but adds a border on the outside edges of the affected cells, unlike Firefox, which adds the correct border. The differences are demonstrated in Figure 2, which shows the rendering of the table markup in the example HTML above (rules="rows") compared in the three browsers mentioned.

Figure 2. The rules attribute in action, as viewed in Firefox, Safari, and Internet Explorer The rules attribute in use, as seen in Firefox, Safari and Internet Explorer

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters