By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,426 Members | 3,407 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,426 IT Pros & Developers. It's quick & easy.

How to align a table to the middle of tha page

P: 1
i know its a simple question, but how would i align a <table> tag to the center of the page, using css?

thanks
Oct 11 '06 #1
Share this Question
Share on Google+
24 Replies


P: 14
<table style="width: 80%; align: center;">
Oct 11 '06 #2

P: 11
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
Oct 13 '06 #3

mikek12004
100+
P: 200
and what about vertical alignment? (for any scrren resolution I want a table to be centered in the center of the page)
Mar 10 '09 #4

P: 1
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:

Expand|Select|Wrap|Line Numbers
  1. <table style="width:90%; margin:auto">
  2. ....
  3. </table>
or if you are using <div> then:
in CSS make a class:
for center align
Expand|Select|Wrap|Line Numbers
  1. .automargin
  2. { margin:auto;
  3. position:absolute;
  4.  }
and call it in div tag:
Expand|Select|Wrap|Line Numbers
  1. <div class="automargin"></div>
Thanks.
Mar 14 '09 #5

hsriat
Expert 100+
P: 1,654
CSS:
Expand|Select|Wrap|Line Numbers
  1. table#yourTable {
  2.     position: fixed;
  3.     left: 50%;
  4.     top: 50%;
  5.     margin: -(H/2)px -(W/2)px;
  6.     width: Wpx;
  7.     height: Hpx;
  8. }
Replace H and W as required.
And don't forget the Strict DTD for IE.
Mar 21 '09 #6

Expert 100+
P: 397
To center the table rail to rail put this in the head of the document:
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. 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;}
  3. </style>
  4.  
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...
Mar 21 '09 #7

P: 14
At least one right answer got in there : (
Mar 24 '09 #8

Frinavale
Expert Mod 5K+
P: 9,731
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:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5.     <title></title>
  6. </head>
  7. <body>   
  8.         <table id="someTable" class="myTableStyle" border="1px">
  9.             <tr>
  10.                 <td>colum1 row1</td>
  11.                 <td>column2 row1</td>
  12.            </tr>
  13.            <tr>
  14.                 <td>colum1 row2</td>
  15.                 <td>column2 row2</td>
  16.            </tr>
  17.         </table>
  18. </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).

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.         .myTableStyle
  3.         {
  4.             width:200px;
  5.  
  6.             /*
  7.                 Now that the width has been set, we can use
  8.                 the margin style to center it horizontally.
  9.                 It will center horizontally by setting the
  10.                 margin-left and margin-right styles to 'auto'
  11.  
  12.                 The following style sets the margin-left,
  13.                 margin-right, margin-top, and margin-bottom to 'auto'.
  14.                 Alternatively you could do:
  15.                     margin:0px auto;
  16.                 This will set the margin-top and margin-bottom to 0px and
  17.                 the margin-left and margin-right to auto.
  18.  
  19.                 You can also specify each one:
  20.                     margin:5px auto 10px auto;
  21.                 This will set the margin-top to 5px, bottom to 10px,
  22.                 and left & right to auto.
  23.  
  24.                 Or you can simply do:
  25.                    margin-left:auto;
  26.                    margin-right:auto;
  27.             */
  28.  
  29.  
  30.             margin: auto;
  31.         }
  32.     </style>
  33.  
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).

Expand|Select|Wrap|Line Numbers
  1.  
  2. <style type="text/css">
  3.         .myTableStyle
  4.         {
  5.            position:absolute;
  6.            top:50%;
  7.            left:50%; 
  8.  
  9.             /*Alternatively you could use: */
  10.            /*
  11.               position: fixed;
  12.                bottom: 50%;
  13.                right: 50%;
  14.            */
  15.  
  16.  
  17.         }
  18.     </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:
Expand|Select|Wrap|Line Numbers
  1.  
  2. <style type="text/css">
  3.         .myTableStyle
  4.         { position:fixed;
  5.            height:50%;
  6.            width:50%;
  7.            top:25%;
  8.            left:25%;
  9.             /*Alternatively you could use: */
  10.            /*
  11.                bottom:25%;
  12.                right:25%;
  13.            */
  14.  }
  15.     </style>
Please be aware that setting the height to 50% when using a position:absolute 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
Mar 24 '09 #9

drhowarddrfine
Expert 5K+
P: 7,435
@Frinavale
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.
Expand|Select|Wrap|Line Numbers
  1. <style type='text/css'>
  2. div{height:400px;width:200px;outline:1px solid;}
  3. button{position:relative;top:50%}
  4. </style>
  5.  
  6. <div>
  7.         <button type="submit">1</button>
  8. </div>
  9.  
Mar 24 '09 #10

Frinavale
Expert Mod 5K+
P: 9,731
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?
Mar 24 '09 #11

drhowarddrfine
Expert 5K+
P: 7,435
I can center a butcher block table, too.

Expand|Select|Wrap|Line Numbers
  1. <style type='text/css'>
  2. html,body{height:100%}
  3. table{
  4.     top:50%;
  5.     position:relative;
  6.     height:100px;
  7.     margin-top:-50px;
  8.     outline:1px solid;
  9. }
  10. </style>
  11.  
  12. <table>
  13. <tr><td>hello</td></tr>
  14. </table>
  15.  
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.
Mar 24 '09 #12

Expert 100+
P: 397
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?
Mar 25 '09 #13

drhowarddrfine
Expert 5K+
P: 7,435
Vertically it should work. Or do they want it horizontally?
Mar 25 '09 #14

Expert 100+
P: 397
Dunno. Seems to me they make it up as they go along...
Mar 25 '09 #15

Frinavale
Expert Mod 5K+
P: 9,731
The OP wanted to center the table in the middle of the page. They haven't responded to this thread so I have no idea if they still need help. This thread's viewed a lot and I found that all of the answers weren't actually answering the orginal question so I attempted to answer it myself.

Since the OP wanted to center the table in the middle of the page, I assumed, they want to center it both vertically and horizontally.

I set the position to relative and the top to 50% but it didn't work for me yesterday....I'll try again later.
Mar 25 '09 #16

Expert 100+
P: 397
I set the position to relative and the top to 50% but it didn't work for me yesterday....I'll try again later.
I don't think I'll hold my breath while I wait...

You may want to examine the rational for centering a table or a tableless layout vertically that contains live type in the first place. Most front-end designers and coders who over recent years approached this issue gave it up as the methods used thus far to make it happen were based on ideal situations.

But the Web is not like that. One never knows what window width or height an end user has muchless what the height of their top and bottom chrome is or if the have a sidebar in place. Or what their particular font-setting or vision requirement may be. And that's just the tip of the iceberg.

There is a method that uses very advanced CSS principles to pull it off. Why anyone would care to use same remains a mystery to me, other than a "whatever does it for you and yours" whim.

But since it would seem you just now are learning how to center a simple block horizontally, your time might be better and more wisely spent learning basic CSS. That in and of itself is a long and very steep learning curve.
Mar 25 '09 #17

Frinavale
Expert Mod 5K+
P: 9,731
I used to use table lay out all the time because that is what I was taught to do. In fact, I only graduated a couple of years ago so I'm almost sure that they are still teaching this technique. So, as ugly as it is, it's still being used out there. I completely understand where you're coming from when you state that it is not a good idea to be encouraging the use of tables as a layout for web pages.

Centering anything vertically with CSS has been challenging for me. I've come up with several solutions, but it always seems specific to the thing that I'm working with.

There is still a need to be able to center things vertically.
In this case, it's the OP's table (because the question had not been answered).
In the real world, for me, it's divs and blocks of text that I want to center vertically within another div or even the window.

When centering a div in the middle of the browser, I use JavaScript to determine the height and width of the div, then use JavaScript to determine the height and width of the browser window, and then use JavaScript set the style of the div accordingly.

It seems overkill to me and I'm almost sure that there's a better way to do this.

My point here is that even though you don't want to encourage using tables as a layout for web pages, the answer to this question could benefit others attempting to vertically center a table or even a div. So, to leave the answer as "don't use tables to design the layout for your web pages", is not good enough and, in fact, it has not answered the question at all.
Mar 25 '09 #18

Expert 100+
P: 397
Good grief. Here.http://www.gunlaug.no/contents/wd_additions_20.html
Best learn how to walk before you run.
Mar 25 '09 #19

Frinavale
Expert Mod 5K+
P: 9,731
The author of that article is also not using tables....
What is the fear of tables?
There is legitimate usages for tables...like when you want to display a bunch of data from a database table for instance.

What I find very interesting is setting the body's display style to "table". This actually might fix the scroll bar issues that appear when setting the height and width of the html and body elements to 100%.

Oh wait:
IE/win doesn't understand CSS table properties
Maybe I should read the whole article first.
Mar 25 '09 #20

Expert 100+
P: 397
Maybe I should read the whole article first.
That would be a nice touch...

You might also glance at the CSS Table Model [1] specs. CSS tables are not tables. They just look like tables.
[1] http://www.w3.org/TR/CSS2/tables.html

With regard to tables proper, there is no "fear of tables." Tables are, and should be, used for setting tabular data. No problem.

And there is no fear of institutions of higher learning and those who attended them that still promote tables for layout of all information, tabular or not. If they wish to live in the past that is their perogative and their choice.

The rest of us prefer to live in the present and push the envelope of the future.
Mar 25 '09 #21

P: 14
http://pmob.co.uk/pob/hoz-vert-center.htm

As David said, there is a complicated technique for vertically centering blocks. It uses more containers than otherwise necessary, and we would only do this under the gun of a crazy designer who thinks web pages can be made in Photoshop (or for some other reason we really really want some box centered in the middle of the page).

The position: fixed answer was cute (the first one someone posted), but only useful if you have nothing else on the page, and IE6 pukes on it anyway. Most of us are quite wary of using position: fixed for setting a box somewhere... it usually means we are trying to turn a document into art. I don't mind art but there are places where it impedes function or logic or the whole purpose of the (box) exising in the first place. Position: fixed is usually in that category.

The display: table the Ol' Norwegian used lets you use vertical-align: middle but outside a table this only works with inlines dealing with sibling's or parent's line heights and the anonymous inline boxes created inside rows of text/images/other inlines (cause inlines have lotsa other funky boxes inside each other). So for some of us we might give modern browsers a centered look and let IE take what it can handle (hacks etc).

As I said before, tables are treated as blocks of data and so, by default, have a display style set to "block".
If you don't set it to display: block (I've actually never tried to, so I'm not even sure if it even works), it'll be what it naturally is: display: table (which yes is a type of block but does not follow the regular rules for static blocks).

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.
It can, as Doc showed, but the second part (pulling the thing back up with a negative margin) seemed missing from your code. And that only works when you have a set height on the thing, which is generally a Bad Idea (you want heights to be flexible).

As it is I'm always a little wary of even using relative positioning (heck, any), mostly because it's a lie. It lies to your eyes. It looks like you moved something, but you didn't really-- you made a new box, which is sitting a hair higher above the page, and moved that-- meanwhile your original box is actually still right where you left it, just invisible. Which freaks me out. It's a useful tool but needs to be carefully used.
Mar 26 '09 #22

Frinavale
Expert Mod 5K+
P: 9,731
Thank you so much for the detailed explanation, Stomme poes. I should have known that a table has a display style of "table". Seems like common sense; but I had over looked that particular display style. I'm going to take what you've said and apply it to a new solution for centering a table.

@David Laakso:

I'm glad that you opened my eyes to the possibility of dynamic CSS solutions; however, I'm going to stay away from using CSS expressions.

Thanks to both of you!

-Frinny
Mar 26 '09 #23

Frinavale
Expert Mod 5K+
P: 9,731
Discussion about using CSS expressions is continued in this thread.
Mar 27 '09 #24

P: 1
@sarang07

Hi,Thanks a lot.. That was useful.
Feb 22 '12 #25

Post your reply

Sign in to post your reply or Sign up for a free account.