ccs table align.....

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
gavinbsocom
Forum Commoner
Posts: 71
Joined: Tue Sep 30, 2003 9:51 pm

ccs table align.....

Post by gavinbsocom »

How would I align a table in css? I dont want to do it in the html document itself? I know you can use

Code: Select all

text-align: center;

Code: Select all

table.head
{
align: center;     ???
}
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

If you are trying to center a table, there are two ways:

1) Auto-Width Margins:
http://bluerobot.com/web/css/center1.html

2) Negative Margin:
http://bluerobot.com/web/css/center2.html

It's harder than it should be due to problems with IE and how it interprets the css.
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

If memory serves, one way of aligning a table which works in both IE and Gecko browsers is to add a little hack for IE, a div tag with an text-align: center style:

Code: Select all

<div style="text-align: center">
<table style="margin: 0 auto;>
<!-- more table tags -->
</table>
</div>
Mac
User avatar
Fredix
Forum Contributor
Posts: 101
Joined: Fri Jul 18, 2003 2:16 pm
Location: Wehr (Eifel) Germany
Contact:

Post by Fredix »

For me

Code: Select all

table
&#123;
  maring-left:auto;
  margin-right:auto;
&#125;
alsways worked out as long as table is not positioned absolutely.
This method is also W3C correct.
Skyzyx
Forum Commoner
Posts: 42
Joined: Fri Feb 14, 2003 1:53 am
Location: San Jose, CA

Post by Skyzyx »

Setting margin-left:auto and margin-right:auto only works when the width is explicitly set.

Code: Select all

table &#123;
	margin:0 auto 0 auto;
	width:500px;
&#125;
Also, you can center an element by making a container, and setting text-align:center to that container.

Code: Select all

<div style="text-align:center;">
	<table>
		<tr>
		...
		</tr>
	</table>
</div>
Post Reply