CODEWITHSUNDEEP
htmlcsshtml-tablecenter
Hsin
Hsin

Reputation: 3

Table not centering at all

I know this question has been asked a billion times, but I've looked at the solutions and the table just refuses to center. I was hoping someone could help me.

This is what I have for the HTML:

<div id="paccount">
    <table style="margin: 0 auto;">
        <tr>
            <td width="320" height="150">Order History</td>
            <td width="28" rowspan="4"></td>
            <td width="320" rowspan="4">Personal Information</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td width="320" height="90">Preferences</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="115" colspan="3">Logout</td>
        </tr>
    </table>
</div>

and here is the CSS for that div:

#paccount {
    width: 668px;
    height: 400px;
    background-color: transparent;
    text-align:center;  
}

EDIT: I meant centering the text in the table, sorry.

Upvotes: 0

Views: 1866

Answers (4)

Christian
Christian

Reputation: 33

Put it in a div named wrapper like this

HTML:

<div id="paccount" class="wrapper">
    <table style="margin: 0 auto;">
        <tr>
            <td width="320" height="150">Order History</td>
            <td width="28" rowspan="4"></td>
            <td width="320" rowspan="4">Personal Information</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td width="320" height="90">Preferences</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="115" colspan="3">Logout</td>
        </tr>
    </table>
</div>

CSS:

.wrapper{
 width: 500px; //you can change this in anything you want feel free to edit.
 margin: 0 auto;
}

Upvotes: 0

Peter Georges Bou Saada
Peter Georges Bou Saada

Reputation: 88

add text align to td

<div id="paccount">
    <table style="margin: 0 auto;">
        <tr>
            <td width="320" height="150">Order History</td>
            <td width="28" rowspan="4"></td>
            <td width="320" rowspan="4">Personal Information</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td width="320" height="90">Preferences</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="115" colspan="3">Logout</td>
        </tr>
    </table>
</div>

css:

#paccount {
    width: 668px;
    height: 400px;
    background-color: transparent;
    text-align:center;  
}
td{
   text-align:center;
}

Upvotes: 0

Filippos
Filippos

Reputation: 457

If you want the div to stay centered in the page you should have:

#paccount {
    width: 668px;
    height: 400px;
border:1px solid black;
    background-color: transparent;
    text-align:center;  
margin-left:auto;
margin-right:auto;
}

but if you want the table cells to be centered you should create another css rule for the table and perhaps the cells.

Upvotes: 0

Canser Yanbakan
Canser Yanbakan

Reputation: 3870

You are not centering the table.

You are trying to center all the text.

You have to center that #paccount div first.

To do that:

#paccount{
    width:668px;
    height:400px;
    background-color: transparent;
    margin:0 auto; /* Here is the key! */
}

Upvotes: 1

Related Questions