rules (HTML attribute)

Spec
Depr. Version
No HTML 2
Browser support (more…)
IE8+ FF1+ SA3.1+ OP9.2+ CH2+
Full Full Buggy Full Buggy

Syntax

rules=" { all | cols | groups | none | rows } "

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’

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>

Value

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

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Full Full Full Full Full Full None None Buggy Buggy Full Full Full Buggy

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, Chrome and Internet Explorer 6 & 7 all apply a border around the table, as well as the cells inside the table, when rules attribute is set to "all"; other browsers tested with this attribute value only applied the rules to inside cells. Similarly, when rules is set to "rows" or "cols", Internet Explorer 6 & 7, also applied an outer border in error. The differences are demonstrated in Figure 2, which shows the rendering of the table markup in the example HTML above (rules="rows") compared in three of the 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

Given the differences in rendering with this attribute, even in the most recent range of browsers, it is probably best avoided (instead opt for CSS to style table cells and borders).

User-contributed notes

There are no comments yet.

Related Products