i know its a simple question, but how would i align a <table> tag to the center of the page, using css?
thanks
24  122169 
<table style="width: 80%; align: center;">
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
and what about vertical alignment? (for any scrren resolution I want a table to be centered in the center of the page)
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: - <table style="width:90%; margin:auto">
-
....
-
</table>
or if you are using <div> then:
in CSS make a class:
for center align - .automargin
-
{ margin:auto;
-
position:absolute;
-
}
and call it in div tag: - <div class="automargin"></div>
Thanks.
hsriat 1,654
Recognized Expert Top Contributor
CSS: - table#yourTable {
-
position: fixed;
-
left: 50%;
-
top: 50%;
-
margin: -(H/2)px -(W/2)px;
-
width: Wpx;
-
height: Hpx;
-
}
Replace H and W as required.
And don't forget the Strict DTD for IE.
To center the table rail to rail put this in the head of the document: -
<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...
At least one right answer got in there : (
 Frinavale 9,735
Recognized Expert Moderator Expert
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: -
<!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). -
<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). -
-
<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: -
-
<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: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
@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. -
<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 9,735
Recognized Expert Moderator Expert
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?
I can center a butcher block table, too. -
<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.
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?
Vertically it should work. Or do they want it horizontally?
Dunno. Seems to me they make it up as they go along...
Frinavale 9,735
Recognized Expert Moderator Expert
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.
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.
Frinavale 9,735
Recognized Expert Moderator Expert
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.
Frinavale 9,735
Recognized Expert Moderator Expert
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.
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.
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.
Frinavale 9,735
Recognized Expert Moderator Expert
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
Frinavale 9,735
Recognized Expert Moderator Expert
Discussion about using CSS expressions is continued in this thread.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Ben |
last post by:
The page below isn't picking up details or location.
What have I missed?
Thanks in advance,
Ben
____________________________________________
<?PHP
|
by: Joe Weinstein |
last post by:
Hi all. I am debugging a JDBC application. I find that a certain
query that has an order-by clause fails with a
SQL1585N A system temporary table space with sufficient page size does not exist....
|
by: RA |
last post by:
Hi
When I create a table and aligned it to the left, how can I have some
padding added from the left so that the user will see the table border on
the left? I don't want to use the vs style...
|
by: ALI-R |
last post by:
How do I allign all my content in aspx page in the middle of page like a lot
of websites ?
Dose it work with differnet screen resolutions?
Thanks for your help.
|
by: vito |
last post by:
Hi
I want to center in vertical position my links (in all resolutions) and I
don't how to do it.
My page www.exterior.pl/bumaga
|
by: Jacksm |
last post by:
How can I align an asp:table columns with gridview columns (the
widths)? I have tried setting table.column(0).width =
gridview.column(0).width at page_load but it doesn't work.
Thanks in advance
|
by: ravib |
last post by:
how to transfer one page to an other page through middle page in javascript
|
by: Puppy Breath |
last post by:
I can center a table in any browser using:
<div style="text-align:center">
<table border="1" style="width: 50%; margin:0 auto">
<tr><td>etc</td></tr>
</table>
</div>
But I...
|
by: oranoos3000 |
last post by:
hi
I have a login page in my site for login member
I want to any user that arrival correctly directly go to page1.php
I use header statement(header("Location: page1.php"))
in middle page that...
|
by: m6s |
last post by:
Good morning. I have a major issue with iText. Major but most of all ridiculous.
After the cration of a table like that
tbl = new Table(7, dataTbl.Rows.Count);...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
| |
