CSS Table won't center

[Rainyplace]

hi all,

I have done some searching on google and can't find a code to center my css table in my products description that actually works. It will only align left.

Here is my code.. maybe i'm missing something.

Cheers,
Grant.

<style type="text/css">
table.stats
table { margin: auto; }
{text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 10px;
color: #fff;
width: 500px;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

table.stats td
{background-color: #eeeeee;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;}


table.stats td.hed
{background-color: #e8e9e9;
color: #000000;
padding: 4px;
text-align: center;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;} 
</style> 

[tino.schlegel]

There is a mistake with the bracket in line 4

{text-align: center;


Not sure if this is what you want because i dont know what classifiers you use (and table.stats table seems a bit weird) but try this:

<style type="text/css">
table.stats table { 
margin: auto; 
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 10px;
color: #fff;
width: 500px;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

table.stats td {
background-color: #eeeeee;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;}


table.stats td.hed{ 
background-color: #e8e9e9;
color: #000000;
padding: 4px;
text-align: center;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;} 
</style>

[Rainyplace]

hhhmmmm.. still hasn't budged..

Here is the full css + Table html. Maybe the table code will help?

Cheers,
Grant.

<style type="text/css">
table.stats table { 
margin: auto; 
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 10px;
color: #fff;
width: 500px;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

table.stats td {
background-color: #eeeeee;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;}


table.stats td.hed{ 
background-color: #e8e9e9;
color: #000000;
padding: 4px;
text-align: center;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;} 
</style><p style="margin-bottom: 0pt;">&nbsp;</p>
<p style="margin-bottom: 0pt;">&nbsp;</p> 
      <table width="500" cellspacing="0" class="stats">
<tbody><tr>
<td class="hed" colspan="8"><font face="Arial">Sticker Superstore Discounts</font></td>
</tr>
<tr>
<td width="81" style="text-align: center;"><font face="Arial" size="2"># of stickers purchased</font></td>
<td width="50" style="text-align: center;"><font face="Arial" size="2">1</font></td>
<td width="50" style="text-align: center;"><font face="Arial" size="2">2-3</font></td>
<td width="50" style="text-align: center;"><font face="Arial" size="2">4-5</font></td>
<td width="50" style="text-align: center;"><font face="Arial" size="2">6-7</font></td>
<td width="50" style="text-align: center;"><font face="Arial" size="2">8-9</font></td>
<td width="50" style="text-align: center;"><font face="Arial" size="2">10-19</font></td>
<td width="70" style="text-align: center;"><font face="Arial" size="2">20+</font></td>
</tr>
<tr>
<td width="81" style="text-align: center;">
<font color="#ff0000" face="Arial" size="2">Discount</font></td>
<td width="50" style="text-align: center;">
<font color="#ff0000" face="Arial" size="2">Nil</font></td>
<td width="50" style="text-align: center;">
<font color="#ff0000" face="Arial" size="2">10%</font></td>
<td width="50" style="text-align: center;">
<font color="#ff0000" face="Arial" size="2">15%</font></td>
<td width="50" style="text-align: center;">
<font color="#ff0000" face="Arial" size="2">20%</font></td>
<td width="50" style="text-align: center;">
<font color="#ff0000" face="Arial" size="2">25%</font></td>
<td width="50" style="text-align: center;">
<font color="#ff0000" face="Arial" size="2">30%</font></td>
<td width="70" style="text-align: center;">
<font color="#ff0000" face="Arial" size="2">Contact us</font></td>
</tr>
</tbody></table>
      <p align="left"><b><i> <font size="1" face="Arial" color="#808080">
      (Doesn't matter what sticker, what colour or sizes, Discount goes by your 
        TOTAL QUANTITY of your order)</font></i></b></p> 

[gjh42]

This is one of the relatively rare cases where an HTML table is actually appropriate, because it contains tabular data. However, you are mixing up dummy <p> elements for spacing, element attributes and inline styling so as to confuse matters. Try putting all the style rules in your stylesheet which is made for them, and keep just the actual HTML structure in the PHP file:

Also, table.stats table { applies only to tables inside a table named .stats; but your table is named .stats itself, so your properties in that rule will not apply to anything. Wrapping the table in a div named .stats will do what you want.

Your <td>s add up to 451px, while you have specified a total table width of 500px. The <td>s will automatically adjust themselves to fit neatly in the table width if you let them. I seldom use tables, so am not familiar with the best way to further adjust that if needed; padding in the stylesheet may be it.

<div class="stats"> 
<h3>Sticker Superstore Discounts</h3>

<table>
<tbody><tr>
  <th># of stickers purchased</th>
  <td>1</td>
  <td>2-3</td>
  <td>4-5</td>
  <td>6-7</td>
  <td>8-9</td>
  <td>10-19</td>
  <td>20+</td>
</tr>
<tr>
  <th>Discount</th>
  <td>Nil</td>
  <td>10%</td>
  <td>15%</td>
  <td>20%</td>
  <td>25%</td>
  <td>30%</td>
  <td>Contact us</td>
</tr>
</tbody></table>

<p class="subtext">
(Doesn't matter what sticker, what colour or sizes, Discount goes by the TOTAL QUANTITY of your order)</p>
</div> 

.stats {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif ;
    font-weight: normal;
    font-size: 10px;
    margin: 3.0em auto 0; 
    width: 500px;
    color: #fff;
    background-color: #666;
    }

.stats h3 { 
    color: #000000;
    background-color: #e8e9e9;
    width: 100%;
    padding: 4px 0;
    text-align: center;
    border-bottom: 2px #fff solid;
    font-size: 12px;
    font-weight: bold;
    } 
    
.stats table { 
    width: 500px;
    border: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
    color: #fff;
    background-color: #666; /*these colors will probably be hidden by the td, th properties*/
    }

.stats td, .stats th {
    color: #000;
    background-color: #eeeeee; /*these colors can probably be moved to the table rule*/
    padding: 4px;
    text-align: left;
    border: 1px #fff solid;
    }

.stats .subtext {
    font-weight: bold;
    font-style: italic;
    font-size: 0.8em;
    color: #808080;
    }

I don't know your exact color/spacing intentions for all the parts of this element in the page, so you will need to adjust some margins, colors, background-colors, etc.

[Rainyplace]

Thank you Glenn, that looks more neat. But table is still not centered on page. Any suggestions


Cheers,
Grant.

[Rainyplace]

disregard last post.. it is centered now. Must have needed an extra couple refreshers.. Thanks heaps for your help tino.schlegel and Glenn

cheers.
Grant