10 replies [Last post]
dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 6 years 36 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

OK, so I've got to use tables in some parts of my site (read: too lazy to design something with CSS at the moment).

What's the proper way of centering a table in a page? For example:

<div style="text-align : center;">
  <table class=login>
    ...
  </table>
</div>

I know technically the DIV is redundent in the above example.

Anyway IE centers the table, given that it's only ~100px wide; but Moz doesn't. What should I put in the surrounding DIV to make the table center? I know I can use <center> but that's surrendering to putting layout in the HTML (says he using tables Laughing out loud)

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 19 years 28 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

Centering Tables

What's up dJomp-

When I center stuff, I usually use two methods... ONE of which is bound to work in your client/user's browser:

<div style="text-align: center;">
    This is the part that's gonna be centered for IE 5+, so put other DIV's in here...
</div>

That is the cheating way to have IE deal with it. Here's the actual, standard's compliant way:

<table style="margin-left: auto; margin-right: auto;">
    The browser will auto adjust the position based on the size of the window... works pretty well.
</table>

What I like to do is to combine them... like i put the text-align: center; attribute in the surrounding tag (putting it in BODY works well too), THEN just to make sure, I put the left and right auto margins in as well. If you do that, there's no reason for the browser to mess up.

-Mike

</twocents>

blakems
blakems's picture
Offline
Enthusiast
UTah, USA
Last seen: 19 years 26 weeks ago
UTah, USA
Timezone: GMT-7
Joined: 2003-04-07
Posts: 60
Points: 0

Centering Tables

Have you tried <table align="center"> that generally works fine.

-bMs-
http//www.blakems.com !important;

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 19 years 28 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

Centering Tables

Yeah, you could use align="center".

But I think dJomp's goal is to use CSS to do it, and the goal behind using CSS and other standard's complient methods is to effectively separate content from presentation.

If you use deprecated presentational markup inside of a content divider (such as <table>, <div>, or <span>) then you're actually moving backwards in the whole scheme of forward compatible web development.

The goal is to get away from such attributes as align, cellpadding, and border, and move towards CSS styles that are more standards complient, such as text-align: center;, padding: 3px;, and border: 1px solid #000;.

-Mike

</twocents>

Deanimal
Offline
Regular
Last seen: 19 years 25 weeks ago
Timezone: GMT-4
Joined: 2003-04-16
Posts: 17
Points: 0

Centering Tables

DJSdotcom covered the answer fine; but I'll just offer another version of his explanation.

When you center a <table>, <div>, <img>, etc, the "correct" way to do it is to use margin:auto for left and right:

table {margin-left:auto; margin-right:auto;}


The problem is IE doesn't recognize margin:auto, so for IE you need to add a text alignment type rule to whatever is containing the table. It can be the <center> tag:
<center>
<table>
<tr><td></td></tr>
</table>
</center>


But that isn't using CSS. Follow the same concept though: use a style rule meant for aligning text (this is "incorrect" but it works in IE):
div {text-align:center;}
table {margin-left:auto; margin-right:auto;}
---------------------------
<div>
<table>
<tr><td></td></tr>
</table>
</div>

Or, if the table is inside another table cell:

table.outer td {text-align:center;}
table.inner {margin-left: auto; margin-right: auto;}
----------------------
<table class="outer">
<tr>
<td>
    <table class="inner">
    <tr><td></td></tr>
    </table>
</td>
</tr>
</table>

Dean

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 19 years 28 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

Centering Tables

Haha, thanks for saying what I was trying to say lol. MUCH better explanation than I provided!

-Mike

</twocents>

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 6 years 36 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Centering Tables

Just shows when you're used to IE how you also get used to writing 'wrong' CSS (ie using text-align to center something other than text)...

Will try out the suggestions tonight, thanks!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 6 years 36 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Centering Tables

Still haven't tried it in my pages, but did a couple of test examples and it works well, thanks!

My plan now is to get rid of the tables altogether though, there's some large problems with making them 100% in older IE's, so a major layout change is in order!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Bladefist
Offline
newbie
Last seen: 17 years 33 weeks ago
Joined: 2005-02-21
Posts: 2
Points: 0

Centering Tables

1st:
G-R-E-A-T thanx goes to DJSdotcom for his formatting mode:
table { margin: auto; }

2nd:
I'm stubborn and decided to build a CSS based page (unavailable because of IP 192.168.... I've choosen a centered style for it. Everything has been good (MSIE 6), since I've installed FireFox. Suddenly all my tables became left-aligned despite my styling:

body { text-align: center; }

some of You may say:
it's obvious, cause it says TEXT-ALIGN
but than I ask You:
why all other elements (ul/ol/div/span/p/img/form) are centered?

You have no idea? So do I! or maybe You have an idea - than I can't wait to hear it!

according to the HTML 4,01 specs, tag: <table align="whatever"> is deprecated, so as far as I understand it, W3C encourages HTML editors not to use it anymore, but requires that HTML browsers have to support it as a backward-compatybility. I decided not to use it! But is there a NICE way to put a table in the middle of a page?
Unfortunately
table { margin: auto; }
works (even in MSIE [but 6.0+]), but it's just a workaround. Is it a bug in HTML/CSS specs, or W3C just messed sth up?

Please help ... really PLEASE

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 38 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

Centering Tables

It's a bug in IE, not in the specs. Smile It incorrectly applies the text-align to containers as well as their contents.

Check out this really thorough centering article that covers all those bases. It gives you the low-down on that bug and why the margin-left: auto + margin-right:auto + an additional text-align:center for IE fixes it:

http://theodorakis.net/tablecentertest.html

Just remember to always serve back the text-align: left to the <p>'s or <td>'s or whatever after you've centered the div or table this way. And if you want to include Mac IE in on the fun, you have to use margin-right, margin-left spelled out; it doesn't apply the margin: 0 auto shorthand correctly.

hth a bit.

Bladefist
Offline
newbie
Last seen: 17 years 33 weeks ago
Joined: 2005-02-21
Posts: 2
Points: 0

Centering Tables

very useful article - I'm grateful

But i still wonder, what is the purpose of leaving ONLY the tables (where all ther objects are!) not centered after:

body { text-align: center; }

it would be much easier if the tables were centered as well, even to put them top-left or top-right with other styles.

IMHO it pointless as it is now ...

please don't tell me, that the proper way to put a table in the middle is that trick with margins..... I still think that an error caused by W3C ... cause i can't understand that's the purpose of it.