Center table on the page using CSS

1901gt · Oct 29, 2005

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

Rowan W · Oct 29, 2005

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:

Code:

table {
  margin:0 auto;
}

Kate · Oct 29, 2005

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

Code:

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

But first try as Rowan suggested.

IE IS BAD

Barrucadu · Oct 29, 2005

why not just use divs?

Code:

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

brianmn · Oct 29, 2005

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 · Oct 29, 2005

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

I think you can use this for aligning..!

Rowan W · Oct 29, 2005

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

1901gt · Oct 30, 2005

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

</style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>flash/main</title>
</head>
<body bgcolor="#ebffea">
<div id="centerMyContent">



<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 · Oct 30, 2005

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 · Oct 31, 2005

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

Rowan W · Oct 31, 2005

treatist said:
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 · Oct 31, 2005

Any of the ways above would work.

Center table on the page using CSS

VIP Member

Established Member

Domainosaurus RexTop Member

Established Member

Established Member

Account Closed

Established Member

VIP Member

Established Member

Established Member

Established Member

Account Closed

Similar threads

We're social

CityOne.net

HangarJobs.com

InboxContact.com

arminel.com

Llama3AI.com

medicalya.com

Erne.org

cmhq.com

localplumbingsolutions.com

TheUKETA.org

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling