Forum Moderators: not2easy

Message Too Old, No Replies

Centering tables

         

mmmwowmmm

3:00 am on Sep 6, 2006 (gmt 0)

10+ Year Member



Trying to center the table. This is what I'm using - anyone see any reason this isn't working?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<style type="text/css">
table {
margin-right:auto;
margin-left:auto;
}
</style>

</head>
<body>

<table><tr><td valign='top'>
<p>this</p>
</td><td valign='top'>
<p>is</p>
</td></tr><tr><td valign='top'>
<p>a</p>
</td><td valign='top'>
<p>table</p>
</td></tr>
</table>

</body>
</html>

Thanks,
Phil

meybaud35mm

3:27 am on Sep 6, 2006 (gmt 0)

10+ Year Member



hello -

this isnt the most obvious way of using css and most people i know took 3-4 hours just to find the answer at one point. instead of using right and left margin, you just use one universal margin value like:

table {
margin : 0px auto 0px;
}

hope this helped.

lexipixel

3:31 am on Sep 6, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Don't know what the <P> tags or the CSS for table were doing for you, but they weren't needed... what about:

<center>
<table>
<tr>
<td valign='top'>this</td>
<td valign='top'>is</td>
</tr>
<tr>
<td valign='top'>a</td>
<td valign='top'>table</td>
</tr>
</table>
</center>

With no width's set on the TABLE, it may open to full width of body, or tighten down to width of maximum space of longest line of cells depending on browser.

I usually set "border="1" inside the <TABLE> tag to troubleshoot, ie-

<table border="1">

then you can actually see what's happening. Aside from width, you also have cellspacing and cellpadding to deal with...

mmmwowmmm

3:59 am on Sep 6, 2006 (gmt 0)

10+ Year Member



meybaud35mm:
that's a more efficient way to write it, I agree, but it's essentially the same thing, and doesn't create a different effect.

lexipixel:
"Don't know what the <P> tags or the CSS for table were doing for you.."

I'm using wiki software that allows users to create webpages and the <p> tags are automatically inserted, so when I recreated it in an off-line HTML file I went ahead and left them in (though it's not how I would write it myself). I know I can style tables in HTML, but I'm trying to do it with CSS.

I've come across several resources that say that the way to center tables with CSS is to use:

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

I have not come across any other technique, and this one isn't working. It seems a simple thing...

mmmwowmmm

5:22 am on Sep 6, 2006 (gmt 0)

10+ Year Member



I figured out what the problem was. I accidentally didn't include the whole DOCTYPE line. I only had:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

and what I needed was:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I was so busy looking at the CSS that I didn't think to check the doctype. I can't believe I just spent 2 hours on that.

A short rant:
I think it's pretty weird that you have to use "table {margin-left:auto; margin-right:auto;}" to center a table. That seems more like a hack to me, or a work-around. What's wrong with just "table {align:center;}" or "table {halign:center;}"? I guess the w3c has their reasons...

meybaud35mm

4:08 pm on Sep 6, 2006 (gmt 0)

10+ Year Member



welcome to the world of css. most every problem i have takes 1-2 hours and is right in front of my eyes. the best css developers say the same.