Forum Moderators: not2easy

Message Too Old, No Replies

Centering a Table

         

carfac

6:16 pm on May 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi:

I have a div that I generally use for centering- just simply a text-align:center sort of thing. Works OK for IE, will center just about anything. But for Netscape, this will not center a table (probably correctly, a table is not text!)

So, what sort of things should I use to center a table?

Thanks!

Dave

Stormfx

6:23 pm on May 1, 2005 (gmt 0)

10+ Year Member



Tables have an 'align' attribute.

<table align="center">

I think that's what you're talking about :)

carfac

6:28 pm on May 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, gee, that was simple! I thought the table had to be in a container that centered it... silly me!

Dave

carfac

6:31 pm on May 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Can you put that in CSS? Like:

table.center {
align:center;
}

carfac

6:37 pm on May 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmmm... weird. I have some tables that are really DIV's- like this one:

.box2 {
position: relative;
width:129px;
padding-top:.2em;
padding-bottom:.2em;
left:2px;
border: 1px solid #336393;
text-align:left;
align:center;
background:#ECF0F4;
}

does not seem to work there. I tried:

<div class="box2" align="center">

And that did not center, either....

carfac

7:08 pm on May 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Also, just saw that " align="center"" does not validate in XHTML Scrict-

Is there another way?

Dave

Stratus42

7:16 pm on May 1, 2005 (gmt 0)

10+ Year Member



hm.. well. .the technique I use to center a table using CSS is the old auto margin thingie.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
.centre {width:500px; margin: 0 auto; border:1px solid #000;}
</style>
</head>

<table class="centre">
<tr><td> this is a table!</td></tr>
</table>

</body>
</html>

hope that's what you were after :-)

cheers!

Stratus

carfac

7:54 pm on May 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Cool- works and validates!

carfac

9:09 pm on May 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Looks like: margin: 0 auto; is the key component!

Dave