Tables: Frames and Rules

HTML & CSS
1

Hi,

I was working with tabular data and I wanted to set 0.25em border all over i.e. the table as a whole and cell divisions. For this I always set border top and left on the table and bottom and right on the td. This always worked for me. However, I was wondering should I actually make use of table frames and rules?

For example, I set following in table:

table { border: 0.25em solid #0099FF; ... }

And set rules to “all” value:

<table cellspacing="0" rules="all">

It achieves the same effect as using:


table, td { border: 0.25em solid #0099FF; }
table { border-bottom: none; border-right: none; ... }
td { border-top: none; border-left: none;  ... }

I always used the table and td method for content and presentation separation, but I can’t help but feel why there isn’t a rules equivalent in CSS which could greatly reduce unnecessary style declarations. Something like the following:


table { border: 0.25em solid #0099FF; border-rules: all; }

I know that’s just wishful thinking, but this has me thinking whether the table and td method I always use is the right way to do it or are using frames/rules for this considered appropriate? :slight_smile:

2

Typically rules (inner borders) are implied and default to ‘none’, with no ‘border’, i.e. 0 and ‘all’ if the border is used so generally they aren’t needed.

3

The rules attribute is not consistent across browsers. css is to be preferred.

4

Not consistent across browsers? I was not fully aware of that. Guess it’s always better to use CSS for styling, regardless of how much style declarations it requires. Thanks for your input.