How do I Align a table

Question

I have a table on my webpage, and it automatically aligns to the left, the text is aligned in the center which is what I want, but I am unable to get the table to align to the center of the page.

<table style="border: 1px solid black;  width:300px">
    <tr>

            <td colspan="2">
                <b>&nbsp;Change Your Passwordsword</b>
                </td>
                </tr>
                <tr>
            <td>
                New Password: 
            </td>    
             <td>
                <input type="password" id="pwd1" name="pwd1" size = "8" />&nbsp;
              </td>
            <tr>
            <td>
            Confirm Password: 
            </td>
                    <td>

                <input type="password" id="pwd2" size = "8" name="pwd2" />&nbsp;
              </td> 
            </tr>  
            <tr>
            <td>
            </td>
            <td>

                <input type="submit" value="Confirm" /></td>

            </tr> 
            <tr>
            <td>
            <asp:Literal ID="msg" runat="server" />
            </td>
            </tr>
            </table>

Here is the code for my table.

see http://stackoverflow.com/questions/7059394/how-to-position-a-table-at-the-center-of-div-horizentally-vertically — Guillermo81, Mar 13 '15 at 12:36

score 1 · Accepted Answer · answered Mar 13 '15 at 12:37

USe the following css property

table{
margin:auto;
}

<table style="border: 1px solid black;  width:300px">
    <tr>

            <td colspan="2">
                <b>&nbsp;Change Your Passwordsword</b>
                </td>
                </tr>
                <tr>
            <td>
                New Password: 
            </td>    
             <td>
                <input type="password" id="pwd1" name="pwd1" size = "8" />&nbsp;
              </td>
            <tr>
            <td>
            Confirm Password: 
            </td>
                    <td>

                <input type="password" id="pwd2" size = "8" name="pwd2" />&nbsp;
              </td> 
            </tr>  
            <tr>
            <td>
            </td>
            <td>

                <input type="submit" value="Confirm" /></td>

            </tr> 
            <tr>
            <td>
            <asp:Literal ID="msg" runat="server" />
            </td>
            </tr>
            </table>

score 1 · Answer 2 · answered Mar 13 '15 at 12:38

1

JSFiddle

Add align="center" to the <table>

answered Mar 13 '15 at 12:38

Vincent Lee

177
1
9

score 0 · Answer 3 · answered Mar 13 '15 at 12:36

0

Just use

margin: 0 auto;

It will center your table.

Check: Fiddle.

answered Mar 13 '15 at 12:36

ketan

19,129
42
60
98

score 0 · Answer 4 · answered Mar 13 '15 at 12:42

To center a table, you need to set the margins, like this:

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

And then do this:

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

At this point, Mozilla and Opera will center your table. Internet Explorer 5.5 and up, however, needs you to add this to your CSS as well:

body {text-align:center;}

How do I Align a table

4 Answers4