Center table on the page using CSS

[1901gt]

I created a few table and I want to centralise it on the page. How do i do that in CSS?

 

[Rowan W]

Be sure you have the correct doctype - HTML 4.01 or higher http://www.w3.org/QA/2002/04/valid-dtd-list.html

Then use:

table {
  margin:0 auto;
}

 

[Kate]

For some browsers you may to tweak the CSS a little bit.

TABLE {margin-left: auto; margin-right: auto; text-align: center;}

But first try as Rowan suggested.

IE IS BAD

 

[Barrucadu]

why not just use divs?

<div align = "center">Your Table Goes Here</div>

 

[brianmn]

I have tried to do this before as well, however I have had trouble comming up with how to center things vertically, seeing as everything seems to do it horizontally only.....

 

[thomaslgates]

<div align = "center">Your Table Goes Here</div>

I think you can use this for aligning..!

 

[Rowan W]

align="center" is not CSS and it is not valid in XHTML, I think.

 

[1901gt]

Yup, its not CSS. Thats the reason why I ask. Lolx. I could use that if I want to. But I want it done in CSS format. I dont know whether this code will work or not. Might try it later.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
body
{
margin: 0px;
}
#centerMyContent
{
margin-left: -400px;
margin-top: -270px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
}
-->
</style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>flash/main</title>
</head>
<body bgcolor="#ebffea">
<div id="centerMyContent">
<!--url's used in the movie-->
<!--text used in the movie-->
<!--
Drag these blocks into the pink canvas to show:
(ii) a rift valley formed by tension
Drag these blocks into the pink canvas to show:
(iii) a rift valley formed by compression
Drag these blocks into the pink canvas to show:
(iv) a block mountain formed by compression

-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="800" height="540" id="flash/main" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="../flash/main.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ebffea" />
<embed src="../flash/main.swf" quality="high" bgcolor="#ebffea"
width="800" height="540" name="flash/main" align="middle"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>

 

[Rowan W]

That code definately won't work, I just tried it. ^^

Just use this:

#centerMyContent
{
margin-left:auto;
margin-right:auto;
border:1px solid #000;
width:600px;
}

The border is there as a visual que.

 

[treatist]

Until the bugs in IE get worked out I would stay away from using percentages in CSS.

 

[Rowan W]

Until the bugs in IE get worked out I would stay away from using percentages in CSS.

You just need to know how the bugs work and then work around them. There's no need to avoid percentages.

If I stayed away from every bug in IE I wouldn't be writing websites.

 

[LeetPCUser]

Any of the ways above would work.