Centering tables in Opera and Mozilla

[liunx]

I tried to center my tables in Mozilla and Opera, but they are aligned left. In Internet Explorer, the tables are centered but not with the above two. Here's the code I use:<br />
<br />
<div style="text-align:center"><br />
<table style="text-align:center"><br />
<br />
I have tried both tags without any sucess. Is there any workaround?<!--content-->Try to add:<br />
<br />
this CSS to the table:<br />
<br />
margin: 0px;<br />
pading: 0px;<br />
<br />
This is the way how my layout is working <br />
<br />
EDIT: The padding is not really needed!<!--content-->http://quasi-ke.servebeer.com/flashgallery.aspx look how I did it here.<br />
<br />
#content {<br />
width:500px;<br />
margin:0px auto;<br />
text-align:left;<br />
padding:15px;<br />
border:1px solid #788282;<br />
background-color:#eee;<br />
}<br />
<br />
that bold text is what is doing the centering<!--content-->Thanks for that style line, but all by table text data is now center aligned. How do I rectify this?<!--content-->If you are conserved about the data in tabel you should only to aply new style to the table. If you are concerned about the data in div you have more options. <br />
<br />
You can make new div befote the table and after the table and style it. or you can aply the classes to the markups and style it with css. There are also some other options (just use your imagination )<!--content-->The tag:<br />
<table style="margin:0px auto;text-align:center"><br />
works, thanks PeOfEo, but the data is also aligned to the center in the cells. <br />
<br />
Dear webfreak, thanks for your input, but the div tag is now rendered useless due to this formatting.<br />
<br />
OK, so now with the table centered, how do I go about aligning the data in the cells to the left?<!--content-->The code for table probably looks like this:<br />
<br />
<br />
<table cellpadding="0" cellspacing="0" class="table"><br />
<tbody><br />
<tr class="a"><br />
<td class = "b">1</td><br />
</tr><br />
</tbody><br />
</table><br />
<br />
<br />
Now you only have to aply this style to your table:<br />
<br />
.table {<br />
text-align: left;<br />
}<br />
<br />
and your text should be aligned left (in the table of course)<br />
<br />
I hope that this is what you are lookig for.<!--content--><table style="margin:0px auto;text-align:center"><br />
should be<br />
<table style="margin:0px auto"><br />
since the margin is centering the table not the text align<!--content-->Originally posted by IncaWarrior <br />
<table style="margin:0px auto;text-align:center"><br />
should be<br />
<table style="margin:0px auto"><br />
since the margin is centering the table not the text align the text align is centering the text. You are right it is not doing anything to center the table.<br />
<br />
<style type="text/css"><br />
a:link {color:#000000;text-decoration:none;}<br />
a:visited {color:#000000;text-decoration:none;}<br />
a:hover {color:#788282;text-decoration:none;}<br />
a:active {color:#000000;text-decoration:none;}<br />
#content {<br />
width:500px;<br />
margin:0px auto;<br />
text-align:left;<br />
padding:15px;<br />
border:1px solid #788282;<br />
background-color:#eee;<br />
}<br />
.rowodd {<br />
background-color:#eee;<br />
}<br />
.roweven {<br />
background-color:#ffffff;<br />
}<br />
td.item {<br />
text-align:center;<br />
vertical-align: middle;<br />
}<br />
img {<br />
border:0px;<br />
}<br />
</style><br />
<br />
That is the full style sheet of the tabular selection page of my flash gallery.<!--content-->