Horizontal and vertical centering of a table

Discussion in 'HTML' started by Tomas, Oct 31, 2003.

  1. Tomas

    Tomas Guest

    Hi,

    I'm working on a little project for school for which I have to - among
    other
    things - design a page containing only one table. I'd like this table
    to be horizontally and vertically centered, and both height and width
    of this table to be say 80% of the available space in the browser
    window. I tried this with nesting tables, sort of like this:

    <table height="100%" width="100%"><tr><td align="center"
    valign="middle"><table height="80%" width="80%"><tr><td>actual
    contents</td></tr></table></table>

    But I found out that TABLE doesn't have a height attribute, and that
    tables
    aren't really ment to be used for layout. So... how do I
    center the table that contains the data horizontally AND vertically
    and give it a width and height of 80% of available space?

    Greetings,
    Tomas
    Tomas, Oct 31, 2003
    #1
    1. Advertising

  2. Tomas

    Joshua Beall Guest

    "Tomas" <> wrote in message
    news:...
    > So... how do I
    > center the table that contains the data horizontally AND vertically
    > and give it a width and height of 80% of available space?


    Perhaps this will be of some assistance:

    http://www.milov.nl/forum/1/28
    Example of it in action: http://milov.nl/code/css/verticalcenter.html

    Also, check this out: http://bluerobot.com/web/css/center1.html

    I am still trying to figure out how to apply all this to my own situation,
    where I have a similar problem, so please do let me know what you wind up
    doing.
    Joshua Beall, Oct 31, 2003
    #2
    1. Advertising

  3. Tomas

    Brett Guest

    I would use css to accomplish what you have mentioned. Here is one way to
    do it....
    note: I haven't tested this on any broswer except windows ie6

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html40/loose.dtd">
    <html>
    <head>
    <title> new document </title>
    <meta name="generator" content="http://www.provisiontech.net/">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="samp.css">
    <style type="text/css">
    BODY {height: 100%; width: 100%; margin: 0;}
    ..content{width: 80%; height: 80%;}
    ..spacer{height: 10%;}
    </style>
    </head>
    <body>
    <div class="spacer"></div>
    <table align="center" width="80%" border="1" cellpadding="0" cellspacing="0"
    summary="" class="content">
    <tr valign="top">
    <td valign="top">Your Content</td>
    </tr>
    </table>
    </body>
    </html>

    --
    Brett
    Provision Tech
    http://www.provisiontech.net

    "Tomas" <> wrote in message
    news:...
    > Hi,
    >
    > I'm working on a little project for school for which I have to - among
    > other
    > things - design a page containing only one table. I'd like this table
    > to be horizontally and vertically centered, and both height and width
    > of this table to be say 80% of the available space in the browser
    > window. I tried this with nesting tables, sort of like this:
    >
    > <table height="100%" width="100%"><tr><td align="center"
    > valign="middle"><table height="80%" width="80%"><tr><td>actual
    > contents</td></tr></table></table>
    >
    > But I found out that TABLE doesn't have a height attribute, and that
    > tables
    > aren't really ment to be used for layout. So... how do I
    > center the table that contains the data horizontally AND vertically
    > and give it a width and height of 80% of available space?
    >
    > Greetings,
    > Tomas
    Brett, Oct 31, 2003
    #3
  4. Tomas

    Tomas Guest

    "Brett" <> wrote in message news:<>...
    > I would use css to accomplish what you have mentioned. Here is one way to
    > do it....
    > note: I haven't tested this on any broswer except windows ie6
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html40/loose.dtd">
    > <html>
    > <head>
    > <title> new document </title>
    > <meta name="generator" content="http://www.provisiontech.net/">
    > <meta name="keywords" content="">
    > <meta name="description" content="">
    > <link rel="stylesheet" type="text/css" href="samp.css">
    > <style type="text/css">
    > BODY {height: 100%; width: 100%; margin: 0;}
    > .content{width: 80%; height: 80%;}
    > .spacer{height: 10%;}
    > </style>
    > </head>
    > <body>
    > <div class="spacer"></div>
    > <table align="center" width="80%" border="1" cellpadding="0" cellspacing="0"
    > summary="" class="content">
    > <tr valign="top">
    > <td valign="top">Your Content</td>
    > </tr>
    > </table>
    > </body>
    > </html>
    >
    > --
    > Brett
    > Provision Tech
    > http://www.provisiontech.net
    >
    > "Tomas" <> wrote in message
    > news:...
    > > Hi,
    > >
    > > I'm working on a little project for school for which I have to - among
    > > other
    > > things - design a page containing only one table. I'd like this table
    > > to be horizontally and vertically centered, and both height and width
    > > of this table to be say 80% of the available space in the browser
    > > window. I tried this with nesting tables, sort of like this:
    > >
    > > <table height="100%" width="100%"><tr><td align="center"
    > > valign="middle"><table height="80%" width="80%"><tr><td>actual
    > > contents</td></tr></table></table>
    > >
    > > But I found out that TABLE doesn't have a height attribute, and that
    > > tables
    > > aren't really ment to be used for layout. So... how do I
    > > center the table that contains the data horizontally AND vertically
    > > and give it a width and height of 80% of available space?
    > >
    > > Greetings,
    > > Tomas


    Thank you! This works perfectly! I'm feeling stupid for not thinking
    of that myself ;)
    Tomas, Oct 31, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Sentient Fluid

    Centering horizontal 'button' menu

    Sentient Fluid, Jan 2, 2005, in forum: HTML
    Replies:
    6
    Views:
    655
  2. Replies:
    3
    Views:
    4,973
  3. Carolyn Marenger

    centering and padding in horizontal menu

    Carolyn Marenger, Mar 19, 2006, in forum: HTML
    Replies:
    7
    Views:
    848
    Jonathan N. Little
    Mar 20, 2006
  4. Replies:
    1
    Views:
    487
    Neredbojias
    Mar 28, 2006
  5. Thad
    Replies:
    2
    Views:
    398
Loading...

Share This Page