Topic: Does anyone know how to center a table on screen with HTML 4.01 Strict and CSS?

I am trying to make the jump from HTML 4.01 Transitional to HTML 4.01 Strict and for the most part, it is a piece of cake, but one little thing evades me: centering a table on screen. It was so simple in HTML 4.01 Transitional and with previous versions of HTML...

In Ancient Times:
<TABLE...ALIGN="CENTER">...
</TABLE>

Or When Centering An Entire Page:
<CENTER>
...
</CENTER>

Or In Recent Times Even:
<DIV ALIGN="CENTER">
...
</DIV>

Now:
???
* The CENTER element is deprecated.
* DIV elements no longer have ALIGN attributes.
* TABLE elements no longer have ALIGN attributes.
* Internet Explorer 6 applies BODY element text-align attributes to all tables, but Netscape 6.2 does not.
* Tables do not inherit text-align attributes from DIV or P containers.

The Ugly, Long Solution:
<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD ALIGN="CENTER">
...
</TD></TR></TABLE>

Need I say "ew"? Indeed, I must. Ew.

If only there were a TABLE element attribute like "align: center" or "horizontal-align: center" rather than "left: xpx

Brian Sexton: Welcome. Yes this is easy to do. The good people at BlueRobot have this question covered. You can use auto-width margins: http://bluerobot.com/web/css/center1.html

or negative margins: http://bluerobot.com/web/css/center2.html

I've tested them with some complex floating examples and they both work fine in all recent browsers. The only major difference is in NS4.x with the auto-width method the centered element is hard against the left side of the screen with the negative margin method it is displaced to the right. With a wide element and lowish screen resolution the latter could push important elements off the side of the screen so (as of today, more testing may lead me to change my mind again) I'd recommend the auto-width margin method.

Emps


You're my wife now Dave

Ran into a similiar conundrum recently. Since all I wanted to do was center content, squishing Body via CSS2 was all it took.

body {
margin: 0px 12%;
padding: 0px;
}

Edit: Jeez. This was just a simple solution for a simple thing. I haven't tried it with different backgrounds and borders and things. Might run into problems in different browsers if you dress it up a bit.


[This message has been edited by warjournal (edited 11-12-2001).]

So... it looks like replies on this board go with the thread rather than with a specific post?

Thanks for the tips, guys. The lack of an overall horizontal alignment attribute that can accept something like "center" or "centered" seems like just about the dumbest thing ever, but setting the margin to "auto" does seem to do the trick in both Internet Explorer 6 and Netscape 6.2. I would not have guessed that one. Not exactly intuitive, huh?

By the way, in case you want to see the page that led to my original post, here it is:
http://www.briansexton.com/

[This message has been edited by Brian Sexton (edited 11-13-2001).]

Brian, that's almost creepy. Same basic idea that I did for my wife.

Creative Savvy - really simple because there is next to no content. :sigh: The body margins are 12% on the left and right. Then, for the content, I squished the margins in an extra 30px on left and right - kinda like using blockquote.
Notice that the hr is wider than the content.

The only problem with I've done is that it breaks in IE when I used <table width="100%"> in the content div. The right of the table shoots out past the set margin. Then I have to dink with the table width. I think this is because of how IE renders the box model.

Brian: You'll have to set body { text-align: center; }for IE/Win.

Emps


You're my wife now Dave

warjournal: By the way that is a neat solution for a fluid site (tucks that one away for future reference!!) but I don't think you need to have that style on the body you could just use it on a DIV that contains everything.

Emps


You're my wife now Dave

Thanks, Emps. I'm almost innovative. And to think, this is the first time that I'm really putting CSS to use beyond a:hover. Bit of a paradigm shift for me.

I did it external because there will be a few more pages added pretty soon. And that will also allow me to tweak other things rather easily, like line-height and stuff and it would suck to put all that jazz in the div itself everytime.

I guess it just depends on how simple or open-ended you want the site to be. I'm just playing it safe.

Kudos.


[This message has been edited by warjournal (edited 11-14-2001).]

It looks like the automatic margins method does not work under Internet Explorer 5.5. Ugh. I still want to write to the standards rather than to any particular browser, but I really wish there was a more intuitive solution for this and earlier.