Binary Expressions

Centering a table in css is quite simple to achieve however how one would think to center a table is not always the correct way to do so.

Common Mistakes

• Table align attribute (deprecated)
• • One may say why not just use the table element attribute align? Well this attribute is deprecated and not recommended to be used. This is why we have CSS to separate styling and structuring.
• Table style text-align: center;
• • One might think to just apply a style on to a table by using text-align: center;. However text-align can only be applied on non-block level element. A table is a block level element.

Solutions

• Method 1 - Using Margins
• • To center a table one must apply a style with margin-left: auto; margin-right: auto;. This can be done like so:

    table.center { margin-left: auto; margin-right: auto; }

    Then apply the class style like so:

      <table class="center">
        ...
      </table>
      

• Method 2 - Using Percentages
• • If you desire to have a table with a specific width, you can do this:

    table.center { width: 70%; margin-left: 15%; margin-right: 15%; }

    Then apply the class style like so:

      <table class="center">
        ...
      </table>
      

• Method 3 - Using Fixed Width
• • If one desires to have a table with a fixed width you can do this:

    div.tablecontainer { width: 98%; margin: 1%; }
    table.center { margin-left: auto; margin-right: auto; width: 200px; }

    Then apply the class style like so:

      <div class="tablecontainer">
      <table class="center">
        ...
      </table>
      </div>
      

    You can set the “width: 200px” to whatever width you desire.

Notes / IE Exception To The Rule

These methods worked perfectly in Mozilla Suite/Firefox, Opera and IE 6. However these methods did not work in IE 5.5 or IE 5.01. You can over come this problem by doing a couple additional styles and the use of a div or span element tag.

• IE 5.01 & IE 5.5 Additional Solution
• • For these methods to work in IE 5.01 & IE 5.5 one must add some additional styles. First enclose your table with a div or span element tag with a css class such as tablecontainer and then create an additional style to your tr and td element tags like so:

    div.tablecontainer { text-align: center; width: 98%; margin: 1%; }
    div.tablecontainer tr, div.tablecontainer td { text-align: left; }
    table.center { margin-left: auto; margin-right: auto; }

      <div class="tablecontainer">
      <table class="center">
        ...
      </table>
      </div>
    

    The “text-align: center;” is what will cause the table to center in these versions of the IE browser. The tables will not center without it. The draw back of having “text-align: center” is it will center all the text inside your table cells. This is counter acted by applying a style to “tr” and “td” to align left. If you have th element tags, make sure to set a style so it aligns the text entered back to the default behaviour if desired (i.e. table.tablecontainer th { text-align: center; }).

Source: Center a table with CSS by Scott Granneman
Source: Centring using CSS