Horizontal and vertical centering of a table

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I'm working on a little project for school for which I have to - among
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

But I found out that TABLE doesn't have a height attribute, and that
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?


Re: Horizontal and vertical centering of a table

Quoted text here. Click to load it

Perhaps this will be of some assistance:

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

Re: Horizontal and vertical centering of a table

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 ">
<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%;}
<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>

Provision Tech

Quoted text here. Click to load it

Re: Horizontal and vertical centering of a table

Quoted text here. Click to load it

Thank you! This works perfectly! I'm feeling stupid for not thinking
of that myself ;)

Site Timeline