TABLE ALIGN deprecated, why?
Marc Mongenet
here is a little problem in my "let's do everything
in strict standards not caring about browser bugs":
<TABLE ALIGN=center>
<TR><TD>This is left-aligned text in a centered block
</TABLE>
will not validate as HTML 4.0 strict because of the
ALIGN attribute. The classic reason to depreciate this
kind of attribute is because CSS can do that.
But the ALIGN attribute for TABLE does not seem to be
emulated by CSS1, is it?
It looks like HTML tables formatting is very particular
and not compatible with CSS1 formatting. Or it
should take all the available horizontal space.
Or should TABLEs be considered as replaced elements ?
Well, the problem for me, is, how to center a *block*
with CSS, while keeping the nice formatting properties
of HTML TABLEs?
Marc Mongenet
Rijk
I use the following construct:
<DIV class=dir>
<!-- tableborder set to see what happens -->
<TABLE border=1><TR><TD>
<UL>
<LI>first link</LI>
<LI>second link</LI>
</UL>
</TD></TR></TABLE></DIV>
with this stylesheet:
DIV.dir { text-align: center; width: auto; margin-left: auto;
margin-right: auto; }
.dir TD { text-align: left; }
.dir UL { text-align: left; list-style: none; margin: 0; }
.dir LI { display: block; } /* this works OK in all tested browsers */
DIV { border: thin blue outset; } /*to see what happens*/
See this particular example at:
http://rijk.op.het.net/test/divcentertest1.html
This works as aspected in NN4, IE5 and Opera 3.6
(IE4 is not available to test right now)
In Mozilla (MS9), the table isn't centered. Is this a bug, or am I
doing it wrong?
--
Anyone who isn't using a CSS-supporting | Rijk van Geijtenbeek |
browser by now is clearly more interested | mailto:ri...@iname.com |
in browsing the content with a stable | http://rijk.op.het.net |
browser, than in fussing about the | come.to/html-informatie |
appearance. - Alan J. Flavell +-------------------------+
Eric A. Meyer
> See this particular example at:
>
> http://rijk.op.het.net/test/divcentertest1.html
>
> This works as aspected in NN4, IE5 and Opera 3.6
> (IE4 is not available to test right now)
>
> In Mozilla (MS9), the table isn't centered. Is this a bug, or am I
> doing it wrong?
The latter, at least from the specification's point of view.
'text-align' applies only to inline content within a block-level element.
In order to properly center a block-level element, you should use the
following instead:
TABLE {margin-left: auto; margin-right: auto; width: 75%;}
...or whatever 'width' value you prefer, so long as it isn't 'auto'.
Of course, this is not very well supported. Legacy behavior has caused
'text-align: center' to center images, and then on to tables, but this is
not the correct way to do it. Gecko is behaving correctly.
--
Eric A. Meyer - ea...@po.cwru.edu - http://www.cwru.edu/home/eam3.html
Editor, Style Sheets Reference Guide http://style.webreview.com/
Coordinator, CSS1 Test Suite http://www.w3.org/Style/CSS/Test/
Member, WSP CSS Technical Committee http://www.webstandards.org/
Braden N. McDaniel
>
> On Thu, 11 Nov 1999 17:08:59 -0500, ea...@po.cwru.edu (Eric A. Meyer)
> wrote:
[snip]
> > The latter, at least from the specification's point of view.
> >'text-align' applies only to inline content within a block-level element.
> >In order to properly center a block-level element, you should use the
> >following instead:
> >
> > TABLE {margin-left: auto; margin-right: auto; width: 75%;}
> >
> >...or whatever 'width' value you prefer, so long as it isn't 'auto'.
> > Of course, this is not very well supported.
>
> But for the problem at hand, this is not a solution.
Why not?
> So I can't center a block in the viewport horizontally?
Yes, you can, and Eric just told you how to do it.
> Like the effect of my styles
> you're seeing in the current css-implementations?
>
> Why isn't "width: auto;" allowed?
Well, 10.3.3 sez: "If 'width' is set to 'auto', any other 'auto' values
become '0' and 'width' follows from the resulting equality." That
supports Eric's statement, but the rules for table layout suggest
another means of deriving the actual width of the block when width is
"auto"; and if the width is derived in that manner, then it seem to me
that "auto" could still be used on the left and right margins to center
the block. Frankly, the spec seems contradictory here. Other opinions?
> >Legacy behavior has caused
> >'text-align: center' to center images, and then on to tables, but this is
> >not the correct way to do it. Gecko is behaving correctly.
>
> Maybe I could use:
>
> TABLE {display: inline;}
I think what you'd want is "inline-table". The UA-default values for for
display on TABLE's children (TR, TD, etc.) will be invalidated if you
use "inline" there, resulting in undefined behavior AFAIK.
--
Braden N. McDaniel
bra...@endoframe.com
<URL:http://www.endoframe.com>
Rijk
>> See this particular example at:
>>
>> http://rijk.op.het.net/test/divcentertest1.html
>>
>> This works as aspected in NN4, IE5 and Opera 3.6
>> (IE4 is not available to test right now)
>>
>> In Mozilla (MS9), the table isn't centered. Is this a bug, or am I
>> doing it wrong?
> The latter, at least from the specification's point of view.
>'text-align' applies only to inline content within a block-level element.
>In order to properly center a block-level element, you should use the
>following instead:
>
> TABLE {margin-left: auto; margin-right: auto; width: 75%;}
>
>...or whatever 'width' value you prefer, so long as it isn't 'auto'.
> Of course, this is not very well supported.
But for the problem at hand, this is not a solution. So I can't center
a block in the viewport horizontally? Like the effect of my styles
you're seeing in the current css-implementations?
Why isn't "width: auto;" allowed?
>Legacy behavior has caused
>'text-align: center' to center images, and then on to tables, but this is
>not the correct way to do it. Gecko is behaving correctly.
Maybe I could use:
TABLE {display: inline;}
.. and go on block block-level content inside this TABLE. No validator
is going to complain, but maybe the browsers will. ;-)
Alexander van der Kolk
>
> On Thu, 11 Nov 1999 19:11:45 GMT, Marc Mongenet
> <marc.m...@freeesurf.ch> wrote:
>
> I use the following construct:
>
> <DIV class=dir>
> <!-- tableborder set to see what happens -->
> <TABLE border=1><TR><TD>
> <UL>
> <LI>first link</LI>
> <LI>second link</LI>
> </UL>
> </TD></TR></TABLE></DIV>
>
> with this stylesheet:
>
> DIV.dir { text-align: center; width: auto; margin-left: auto;
> margin-right: auto; }
> .dir TD { text-align: left; }
> .dir UL { text-align: left; list-style: none; margin: 0; }
> .dir LI { display: block; } /* this works OK in all tested browsers */
> DIV { border: thin blue outset; } /*to see what happens*/
>
>
> http://rijk.op.het.net/test/divcentertest1.html
>
> This works as aspected in NN4, IE5 and Opera 3.6
> (IE4 is not available to test right now)
>
> In Mozilla (MS9), the table isn't centered. Is this a bug, or am I
> doing it wrong?
>
What happens in NC4 if you use <HR> or <FORM> in your table construct?
After a lot of trying to align tables with CSS1 (I use HTML 4 Strict) I have
chosen to use a table of 100% width and to nest tables.
<TABLE WIDTH="100%">
<TR>
<TD class="midden">
nested table
</TD>
</TR>
</TABLE>
where
.midden {text-align : center}
NC4 has no problem with alignments in <TD>. I know: tables for layouts is
discouraged.
By the way: Mozilla MileStones have some problems with alignment of tables when
CSS1 is used.
--
Alexander van der Kolk
alex...@vdkolk.com
http://www.vdkolk.com