Horizontal and vertical centering of a table

Tomas · Oct 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

Joshua Beall · Oct 31, 2003

Tomas said:
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.

Brett · Oct 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>

Tomas · Oct 31, 2003

Brett said:
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>

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

Having trouble centering contents of td ?	3	May 2, 2023
Centering a button using flexbox	2	Feb 5, 2023
Centering picture element for larger screen sizes	2	Sep 21, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
centering things within a table	3	Nov 15, 2007
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value?	7	Aug 22, 2023
vertical centering of text	3	Mar 8, 2006
SendGrid email issue in responsive Gmail	1	Nov 4, 2021

Horizontal and vertical centering of a table

Tomas

Joshua Beall

Brett

Tomas

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads