Printable View
Hi all,
could someone pls tell me how can I vertically center table? Of course I can use <table height=100%... and use this table as centering table. But this solution isn't ok for w3, as table shouldn't have an height attribute...
Someone have better idea? Maybe some div or I don't know...
Thanx in advance.
try using an inline CSS... you're on the right lines with the idea of a div tag :)
e.g.
<head>
<style type="text/css">
div.tbl1 { position:absolute; left:200px; top:50px; width:202px; height:37px; }
</style>
</head>
<body>
<div class="tbl1">
<TABLE BORDER="x" CELLPADDING="y">
table contents
</TABLE>
</div>
</body>
just need to fill in the table contents with yours etc
Z
You can use the valing="center" or align="center" in any table, td, tr tags..
valign = Vertical Aligment = Option are : Top - Center - Bottom
align = Horitontal Aligement = Option are : Left - Center - Right
Good Luck1
http://www.w3schools.com
Star****ers|Inc
Hi:)
Thanx. But to use this I have to know the resolution of users monitor, right? Because I cant write left:200px when on someones machine it will be ok but on other not... Correct me if I'm wrong.Quote:
<head>
<style type="text/css">
div.tbl1 { position:absolute; left:200px; top:50px; width:202px; height:37px; }
</style>
</head>
And if I know the resolution I can use one table as centering table and inside this table write the second table. Something like this:
<table>
<tr>
<td height='600'>
<table>.....
blablabla
</table>
</td>
</tr>
</table>
I know I can get the resolution using javascript but isn't there something simplier?
And btw- is it so bad to use <table height... I know that I shouldn't do it (as table has no height attribut) but it works all browser I tried (IE, Opera) - haven't tried Netscape, etc...
Yes I can use center but I can't (or at least I shouldn't) use height attribute as it is allowed only in TD element... So center solves nothing. btw - valign ='middle' - not center IMHO.Quote:
You can use the valing="center" or align="center" in any table, td, tr tags..
I know this url but I haven't found there an answer for my question.Quote:
Anyway - thank you all for your answers;)
sort of... but you've obviously not had much experience with CSS... you can use % values instead of px. The px values are useful if you want something of a definite size or a definite position.. for example you may wish to use them to describe the height from the top of the screen and from the left of the screen, the % values are useful if like in you case you don't know they exact dimensions of the viewers res. You can mix and match % and px values incidentally so don't feel restricted to using just one.Quote:
Thanx. But to use this I have to know the resolution of users monitor, right? Because I cant write left:200px when on someones machine it will be ok but on other not... Correct me if I'm wrong.
e.g for the div definition in the style tag you could write something like
div.tbl1 { position:absolute; left:150px; top:50px; width:95%; height:80%; }
this will then define the table boundary space according to the users resolution but will always set the table 150px from the left and 50px from the top of the screen.
regarding the height attrib... well, its just bad HTML thats all - look at it like this any code should be standardised as much as possible (since IE and Netscape both buggered that up a number of years ago the W3C are trying to get everyone to write HTML properly), can you imagine if C++ had several variations of what can and can't be applied in a program - you'd never get a c++ prog to run on more than a percentage of machines - this is how HTML was and still is to an extent. Some attibutes that work fine in IE don't work in Netscape and this can totally screw up your website designed for IE if it is viewed in Netscape.
I'll look for a link for you for CSS that might help. back in a bit
Z
PS this place http://www.w3schools.com/css/css_positioning.asp does actually tell you about positioning with CSS... you should have searched through the website that Star****er suggested a little more. I'll admit its not the clearest if you're new to this so I'll hunt around a bit when I have time (go to go back to the desk job)
for centering something using percentages instead of pixels, the easy way it so set the the left value to negative half the width of object being centered and then set the left margin to 50%...
Here is where I learned about:
Auto-width margin centering : http://bluerobot.com/web/css/center1.html
Negative margin centering: http://bluerobot.com/web/css/center2.html
And just to be nice to this site because I've used it alot to figure out css there entry page for css layouts (aptly named the css layout resevoir) here is that link: http://bluerobot.com/web/layouts/
cheers,
Dhej
as promised... sun7dots you might find this place of help
http://www.htmlhelp.com/reference/css/
Z
Thank you all for your answers but hit me in my stupid head! I still don't have succes:(
Percents - of course - I don't know how could I forgot this thing. Ok I know how to use it. So with this I was able to make a div element that covers whole height of screen. But then... Then.. Then I wasn't able to verticaly center the table inside this div. I tried vertical aligment but maybe I tried wrong or what, but nothing happened:( Would be someone soooo generous and write me here short examle how to do this right? I simply can't center it myself.
Stupid stupid sun:)
Thank you all!!!
I'm happy to help, but it'd be better if you post your HTML up here - you'll have to upload it as a text attachment - that way we can see the context of what you're trying to do and see where you're going wrong and correct your HTML as necessary. Provide better learning for you too since you can see where you've gone wrong.
Z
ok. heres a short example of what I was trying to do... Didn't work. What did I wrong?
Thanx:]Quote:
<html>
<head>
<title>Title here!</title>
</head>
<body style='margin-left:0px;margin-top:0px;height:100%;width:100%;'>
<div align='center' style='height:100%;width:100%;border-style:solid;border-color:black;border-width:1px;'>
<table width=624 cellspacing=0 cellpadding=0 border=0 style='vertical-align: middle;border:solid;'>
<tr>
<td>hulibrk </td>
</tr>
</table>
</div>
</body>
</html>
I always find it interesting how others write HTML.... you may not like my style but this is what I came up with - it will give you the result that I think you were after - correct me if I'm wrong. Note rather than use an inline CSS as I originally suggested I used a document level CSS mainly because that's what I tend to use but you should be able to adapt it if you want to
I'm not sure why you had the 1px border on the outer edges of your page... but I'm thinking that you may not have wanted it??Quote:
<html>
<head>
<title>Title here!</title>
<style type="text/css">
div.table { position:absolute; margin-left: auto;margin-right: auto; left:25%; top:50%; }
</style>
</head>
<body>
<div class="table">
<table border="1px" bordercolor="black" cellspacing="0px" cellpadding="0px" width="624px">
<tr>
<td>hulibrk </td>
</tr>
</table>
</div>
</body>
</html>
Incidentally I also found quite a nice guide here which I think you might find of some help if you are interested
http://theodorakis.net/tablecentertest.html
Z
PS I've just remembered one more thing... the attribute bordercolor="black" in the table tag can be removed if you like, it's not W3C recommended since it's an IE specific attribute and will invalidate strict (and possibly transitional) interpretations of HTML - but it's up to you - depends on how much you want to conform to W3C guidelines
Yes that's it:] Thanx