Table not centered in IE

Discussion in 'Web Design' started by jadiebrown, Mar 11, 2009.

to remove all ads.
  1. jadiebrown

    jadiebrown New Member

    Messages:
    24
    Hi, I have a table on my page which is set to be in the middle of the page. This comes out fine in Firefox but in IE the entire table is aligned to the left of the page. What are the possible causes of this and is there a way to fix it?
    Thanks,
     
  2. AusQB

    AusQB New Member

    Messages:
    167
    Try giving it the style attribute "margin: 0 auto;".
     
  3. jadiebrown

    jadiebrown New Member

    Messages:
    24
    hey, thanks for that. Unfortunately my margin has already been set to auto and it still doesn't center. I even tried aligning the left and right margins separately. :confused:
     
  4. AusQB

    AusQB New Member

    Messages:
    167
    Put the table in a <div>, and set the div's margin to 0 auto. Set the div's dimensions to that of the table, and then set the table's width and height to 100%;
     
  5. conor

    conor New Member

    Messages:
    348
    There's no need to do that. margin:0 auto; is logical but it only works in firefox. If you want it to align center in IE you will have to say text-align:center; on it's containing element.

    Example if you have a table inside a div then do this:
    Code:
    #div{
        text-align:center;
    }
    #table{
        text-align:left;
        margin:0 auto;
    }
    
    The above should work in all browsers.
     
  6. DamienDarwick

    DamienDarwick New Member

    Messages:
    33
    There are several possible fixes for this problem.

    1. In your table code put the code align="center". like this:

    Code:
    <table width="100%" cellspacing="0" cellpadding="0" border="0" [COLOR="Red"]align="center"[/COLOR]>
    OR:

    2. Place your entire table inside a div tag with align="center" like so:

    Code:
    [COLOR="Red"]<div align="center">[/COLOR]
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tr>
             <td>
                  Just some simple text here to demonstrate it!
             </td>
         </tr>
    </table>
    [COLOR="Red"]</div>[/COLOR]
    OR:

    3. Its an old one but a goodie! You could always set center tags around your table. I find that sometimes this is the only thing that works especially when working with IE :( you can do this like so:

    Code:
    [COLOR="Red"]<center>[/COLOR]
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tr>
             <td>
                  Just some simple text here to demonstrate it!
             </td>
         </tr>
    </table>
    [COLOR="Red"]</center>[/COLOR]
     
  7. jadiebrown

    jadiebrown New Member

    Messages:
    24
    Thanks everyone for the input. I went with putting the entire table in a div, and using CSS to create a "centerdiv" class.
     
  8. TheLaw

    TheLaw New Member

    Messages:
    5
    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">

    The bold part will solve the problem with tables.
     

Share This Page