Re: centering tables with CSS

In article <eric-7984D1.08284320072000@news.mango-bay.com>,
  "Eric A. Meyer" <eric@meyerweb.com> wrote:
>    This isn't really the CSS approach.  Well, it's one CSS approach, but 
> it isn't the best one.  It's simply the one that works today, in the 
> browsers people are using.
>    In fact, the best way to center all the tables in a document is to 
> write:
> 
>      TABLE {margin-left: auto; margin-right: auto; width: 50%;}
> 
> ...or whatever width is preferred to the one I used.  

Not quite. That would be correct for non-replaced elements such as P,
where the element will default to filling out the containing block (and
hence centring 

it would have no effect), but for tables, the width is assigned
automatically, according to the width of the content, and so the width
is redundant (and 

indeed undesirable - aside from width: 100% it is rarely desirable to
assign width to tables).

>    The drawback is that many commonly used browsers don't support the 
> auto-margin approach I show above.  Thus the work-around of wrapping the 
> table in a DIV and setting the DIV to have 'text-align: center', which 
> does work.

Although it shouldn't. Text-align only affects the alignment of text
within line boxes - never block-level elements. You could of course make
a table into an 

inline-level element with display: inline-table, which would give it
much the same status as an IMG element.

>    You're right, it's more wordy, but still has its advantages over HTML 
> markup:  if you decide to right-align all your tables, you can just 
> change your styles for 'DIV.table' instead of having to find every 
> CENTER tag and replace it with a <DIV align="right">.  Of course, you 
> could also try sticking with CENTER, and then, if you want 
> right-justified tables, write:
> 
>    CENTER {text-align: right;}

not so.

Really CENTER is not equivalent to text-align: center, as stated in the
HTML specification - the spec is badly in error on this (in that it was
surely not 

intended to redefine CENTER - you shouldn't retrospectively invalidate
preexisting behaviour)*, and if browsers followed this many pages would
be broken. 

Properly it is:

CENTER * {margin-left: auto;
margin-right: auto} /* For tables */

CENTER {text-align: center}

CENTER TABLE {text-align: left} /* Break text-align inheritance; note
that this is legitimate pre-existing functionality to CSS */

(and possibly similar rules for DIV[align] as well).

-----------------------------------
Please visit http://RichInStyle.com. Featuring:
MySite: customizable styles.         AlwaysWork style 
Browser bug table covering all CSS2 with links to descriptions.
Lists of > 1000 browser bugs         Websafe Colorizer 
CSS2, CSS1 and HTML4 tutorials.      CSS masterclass 
CSS2 test suite: 5000++ tests and 300+ test pages.

Received on Friday, 21 July 2000 11:18:48 UTC