Log in

View Full Version : Centering a table...


STJ
07-23-2008, 11:52 AM
Hi guys. I am making a site and it's based on a table. It' s already centered horizontally. Is there eny way (with html or javascript) to make it totally centered (horizontally and vertically) into my browser window?

Thank you in advance :)
jscheuer1
07-23-2008, 03:15 PM
http://www.google.com/search?client=opera&rls=en&q=vertical+centering+quirksmode&sourceid=opera&ie=utf-8&oe=utf-8
chas
07-23-2008, 09:03 PM
<td valign=middle></td>
jscheuer1
07-23-2008, 09:17 PM
<td valign=middle></td>



That will vertically center the content of a table cell in the cell. If it were the only cell in a table that took up 100% of the height of the page, it would vertically center anything in it relative to the page. But I think this can only happen in quirksmode. With a valid DOCTYPE, 100% height is meaningless. Hence the link I gave, where many methods for vertical centering are discussed.
chas
07-23-2008, 10:02 PM
well i asked a similar q' in the other post which is unresolved LOL

isnt the table height determined by td height??
STJ
07-23-2008, 10:18 PM
Thank you, but you didn't help me very much my friend.

Can someone please vertically center the table below? I know that there are many ways to do that, but i preffer in css. Caution: I do not want to change the height and the width of the table. The dimensions are 900 X 600 px.

Thank you in advance.



<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">

<table width="900" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="900" height="600"></td>
</tr>
</table>
</body>
</html>
jscheuer1
07-24-2008, 05:14 AM
Here's one way:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Centered Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
color:#000;
background-color:#fff;
margin:0;
padding:0;
}
table {
width:900px;
margin:-300px 0 0 -450px;
height:600px;
position:absolute;
top:50%;
left:50%;
border:1px solid red;
}
td {
padding:0;
margin:0;
width:900px;
height:600px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
</tr>
</table>
</body>
</html>

The border (highlighted in the above) may be changed to:


border:none;

I only included a visible border to show the centering effect. There is one disadvantage to this approach. If the viewport is shorter or narrower than the table, parts of it will be impossible to see.
STJ
07-24-2008, 10:20 AM
Thank you very much, you code is working just fine. Have a great day!
chas
07-24-2008, 01:27 PM
<table width="900" border="0" cellpadding="0" cellspacing="0" align="center" valign="middle">

why didnt that work?? instead of going thru all that css??
jscheuer1
07-24-2008, 02:38 PM
<table width="900" border="0" cellpadding="0" cellspacing="0" align="center" valign="middle">

why didnt that work?? instead of going thru all that css??

The valign attribute applies only to inline elements (a table is not an inline element) like span, input, img, etc. Or to a table cell. It's meaning is slightly different in a table cell. In a cell it aligns the things inside the cell relative to the height of the cell. With all others that it applies to, it aligns the element relative the height of the line.
chas
07-24-2008, 07:02 PM
align="center" valign="middle"

well he confused me by placing the align in there LOL