How to align a table to the middle of tha page

**le007** · Oct 11 '06, 01:28 PM

**stnick** · Oct 13 '06, 01:18 AM

Or you could enclose the entire table in a <div align="center"> <table ...>

</table></div>

is also a viable solution, this may work better in various browsers as some may or may not recognize the style in the table tag.

~nicholas

**mikek12004** · Mar 10 '09, 09:36 AM

and what about vertical alignment? (for any scrren resolution I want a table to be centered in the center of the page)

**sarang07** · Mar 14 '09, 04:21 AM

Hi All,
Stnick, Le007 sorry to say but you both given wrong techniques.

Thatguy , it's very simplest way to center align a table is:

Code:

<table style="width:90%; margin:auto">
....
</table>

or if you are using <div> then:
in CSS make a class:
for center align

Code:

.automargin
{ margin:auto;
position:absolute;
 }

and call it in div tag:

Code:

<div class="automargin"></div>

Thanks.

**hsriat** · Mar 21 '09, 03:36 PM

CSS:

Code:

table#yourTable {
	position: fixed;
	left: 50%;
	top: 50%;
	margin: -[b](H/2)[/b]px -[b](W/2)[/b]px;
	width: [b]W[/b]px;
	height: [b]H[/b]px;
}

Replace H and W as required.
And don't forget the Strict DTD for IE.

**David Laakso** · Mar 21 '09, 04:27 PM

To center the table rail to rail put this in the head of the document:

Code:

<style type="text/css">
table {border: 1px dashed fuchsia/*for testing only*/;overflow:hidden/* to open the table if it is necessary*/; width:whatever its width is in pixels, percent, or em; margin: 0 auto;}
</style>

Centering a table vertically, or anything else, assuming it has movable text within it and no height hard coded, is difficult but possible with CSS. We would need to see what you got.

OTOH, if the contents of the table is not tabular data, remember not to forget this is 2009 not 1998; and that you ought to use a tableless layout-- not a table...

**Stomme poes** · Mar 24 '09, 03:13 PM

At least one right answer got in there : (

**Frinavale** · Mar 24 '09, 04:42 PM

Today I learned how to vertically center a button within a <div>.
I thought that I could apply this to help you solve your problem too but this is not the case.

I think the reason is because a table is treated as a block of data and by default has a display style set to "block"; whereas the button element is not a block of data and has a default display style set to "inline".

I created a simple table:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>   
        <table id="someTable" class="myTableStyle" border="1px">
            <tr>
                <td>colum1 row1</td>
                <td>column2 row1</td>
           </tr>
           <tr>
                <td>colum1 row2</td>
                <td>column2 row2</td>
           </tr>
        </table>
</body>

I then started trying to align this in the center of the page using CSS alone.

Centering the table horizontally was pretty easy.

As I said before, tables are treated as blocks of data and so, by default, have a display style set to "block". In order to align a element with a display style set to "block", you need set it's width style. Once the width has been set you can use the margin style to horizontally align the element in the middle of it's parent element (in this case the parent element is the <body> element).

Code:

<style type="text/css">
        .myTableStyle
        {
            width:200px;
                        
            /*
                Now that the width has been set, we can use
                the margin style to center it horizontally.
                It will center horizontally by setting the
                margin-left and margin-right styles to 'auto'
                
                The following style sets the margin-left,
                margin-right, margin-top, and margin-bottom to 'auto'.
                Alternatively you could do:
                    margin:0px auto;
                This will set the margin-top and margin-bottom to 0px and
                the margin-left and margin-right to auto.
                
                You can also specify each one:
                    margin:5px auto 10px auto;
                This will set the margin-top to 5px, bottom to 10px,
                and left & right to auto.
                
                Or you can simply do:
                   margin-left:auto;
                   margin-right:auto;
            */
            
            
            margin: auto;
        }
    </style>

To align an "inline" element vertically in the center you could simply set it's position to "relative" and move it down from the top of it's parent element by 50%. However this will not work with a block element.

So why don't you just set the display style of the table element to "inline" you ask?

Because the table rows and data are blocks as well and the content will be somewhat messed up. If you set these to "inline" as well you will lose table layout of your table.

The only solution I've found is to set the position of the table to either absolute or fixed and move the table 50% from the top (or bottom) and 50% from the left(or right).

Code:

       
<style type="text/css">
        .myTableStyle
        {
           position:absolute;
           top:50%;
           left:50%; 
            
            /*Alternatively you could use: */
           /*
              position: fixed;
               bottom: 50%;
               right: 50%;
           */
 
         
        }
    </style>

Setting the margins of the table once it has a position of absolute or fixed will have no effect on how the element centered...so it's not necessary to set them for this example.

There are 2 things to note about using this method to center your table:

The first thing is that the table will be moved to 50% from the left and 50% from the top. This means that the top left corner of the table will be moved to the center and the table will be drawn from there. So, the top of your table will be in the center of the window and the rest of the table will be below this point.

To get around this, you should set the height and width of the table to some percentage of the page and subtract half of that value from the top value and left value:

Code:

       
<style type="text/css">
        .myTableStyle
        { position:fixed;
           height:50%;
           width:50%;
           top:25%;
           left:25%;
            /*Alternatively you could use: */
           /*
               bottom:25%;
               right:25%;
           */
 }
    </style>

Please be aware that setting the height to 50% when using a position:absolu te doesn't actually do anything to the table; however setting the height to 50% when the table has a fixed position will effect the table's height.

The second thing to note is that setting the table's position to absolute or fixed will draw the table in such a way that it is no longer positioned relative to the rest of the page's content. As such it will appear to "float on top of" any other content in the page.

-Frinny

**drhowarddrfine** · Mar 24 '09, 07:56 PM

Originally posted by Frinavale

whereas the button element is not a block of data and has a default display style set to "inline".

Well, no. I'm not sure inline is default but you can set it to either block or inline.

I didn't read this whole thread but here's a solution to centering a button inside a div. It's the same as in the other thread.

Code:

<style type='text/css'>
div{height:400px;width:200px;outline:1px solid;}
button{position:relative;top:50%}
</style>

<div>
        <button type="submit">1</button>
</div>

**Frinavale** · Mar 24 '09, 08:04 PM

This thread's about centering a Table ;)

I found that the solution you've given for centering a button cannot be applied to a table.

You don't think that's because a Table's a block?

**drhowarddrfine** · Mar 24 '09, 10:01 PM

I can center a butcher block table, too.

Code:

<style type='text/css'>
html,body{height:100%}
table{
    top:50%;
    position:relative;
    height:100px;
    margin-top:-50px;
    outline:1px solid;
}
</style>

<table>
<tr><td>hello</td></tr>
</table>

It all has to do with relative positioning but I'd rather leave my relatives out of this.

You don't need the height and margin-top but it can pretty things up a bit.

**David Laakso** · Mar 25 '09, 04:08 AM

I can center a butcher block table, too.

Don't think you're gonna center anything, vertically or horizontally -- much less a butcher block table -- with that html/css, Doc. Or, am I missing something. Again?

**drhowarddrfine** · Mar 25 '09, 04:23 AM

Vertically it should work. Or do they want it horizontally?

**David Laakso** · Mar 25 '09, 04:40 AM

Dunno. Seems to me they make it up as they go along...

How to align a table to the middle of tha page

How to align a table to the middle of tha page

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment