Verticaly centering table
Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Verticaly centering table

  1. #1
    Senior Member
    Join Date
    Jan 2002
    Posts
    227

    Question Verticaly centering table

    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.
    http://promote.opera.com/small/opera94x15.gif

    [gloworange]Sun7dots[/gloworange]

  2. #2
    Senior Member Zonewalker's Avatar
    Join Date
    Jul 2002
    Posts
    949
    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
    Quis Custodiet Ipsos Custodes

  3. #3
    AO French Antique News Whore
    Join Date
    Aug 2001
    Posts
    2,126
    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
    -Simon \"SDK\"

  4. #4

  5. #5
    Senior Member
    Join Date
    Jan 2002
    Posts
    227
    Hi

    <head>
    <style type="text/css">
    div.tbl1 { position:absolute; left:200px; top:50px; width:202px; height:37px; }
    </style>
    </head>
    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.
    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...

    You can use the valing="center" or align="center" in any table, td, tr tags..
    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.

    I know this url but I haven't found there an answer for my question.

    Anyway - thank you all for your answers
    http://promote.opera.com/small/opera94x15.gif

    [gloworange]Sun7dots[/gloworange]

  6. #6
    Senior Member Zonewalker's Avatar
    Join Date
    Jul 2002
    Posts
    949
    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.
    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.

    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)
    Quis Custodiet Ipsos Custodes

  7. #7
    Senior Member
    Join Date
    Aug 2001
    Posts
    251
    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
    The owl of Minerva spreads its wings only with the falling of dusk. -Hegel

  8. #8
    Senior Member Zonewalker's Avatar
    Join Date
    Jul 2002
    Posts
    949
    as promised... sun7dots you might find this place of help

    http://www.htmlhelp.com/reference/css/

    Z
    Quis Custodiet Ipsos Custodes

  9. #9
    Senior Member
    Join Date
    Jan 2002
    Posts
    227

    Angry

    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!!!
    http://promote.opera.com/small/opera94x15.gif

    [gloworange]Sun7dots[/gloworange]

  10. #10
    Senior Member Zonewalker's Avatar
    Join Date
    Jul 2002
    Posts
    949
    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
    Quis Custodiet Ipsos Custodes

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •