rules attribute allows you to set borders (also
called rules, surprise, surprise!) inside the
the boundaries between cells. For example, you can set the
"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
attribute’s partner in crime—or the
rulesattributes are set to
attribute for this
table is set to
<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>
The recognized attribute values are as shown in the syntax section.
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
is set to
"all"; other browsers tested with this
attribute value only applied the rules to inside cells. Similarly, when
rules is set to
"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 (
in three of the browsers mentioned.
rulesattribute in action, as viewed 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).
There are no comments yet.