Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Horizontal and vertical centering of a table

Reply
Thread Tools

Horizontal and vertical centering of a table

 
 
Tomas
Guest
Posts: n/a
 
      10-31-2003
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
 
Reply With Quote
 
 
 
 
Joshua Beall
Guest
Posts: n/a
 
      10-31-2003
"Tomas" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) m...
> 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.


 
Reply With Quote
 
 
 
 
Brett
Guest
Posts: n/a
 
      10-31-2003
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" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) m...
> 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



 
Reply With Quote
 
Tomas
Guest
Posts: n/a
 
      10-31-2003
"Brett" <(E-Mail Removed)> wrote in message news:<(E-Mail Removed)>...
> 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" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed) m...
> > 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
css horizontal centering problem in html Thad HTML 2 02-24-2007 09:08 PM
vertical centering in css google@rbtbowers.com HTML 1 03-28-2006 01:00 AM
centering and padding in horizontal menu Carolyn Marenger HTML 7 03-20-2006 01:53 PM
vertical centering of text google@rbtbowers.com HTML 3 03-19-2006 08:36 PM
Centering horizontal 'button' menu Sentient Fluid HTML 6 01-02-2005 06:17 PM



Advertisments