Welcome to WebmasterWorld Guest from 52.91.176.251

Forum Moderators: not2easy

Message Too Old, No Replies

Centering tables

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

Junior Member

10+ Year Member

joined:May 1, 2005
posts:108
votes: 0


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

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

Junior Member

10+ Year Member

joined:May 31, 2006
posts:47
votes: 0


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.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 16, 2004
posts:1343
votes: 5


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...

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

Junior Member

10+ Year Member

joined:May 1, 2005
posts:108
votes: 0


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...

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

Junior Member

10+ Year Member

joined:May 1, 2005
posts:108
votes: 0


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...

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

Junior Member

10+ Year Member

joined:May 31, 2006
posts:47
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members