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=...utf-8&oe=utf-8

**chas** · 07-23-2008, 09:03 PM

Code:

<td valign=middle></td>

**jscheuer1** · 07-23-2008, 09:17 PM

Originally Posted by chas

Code:

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

Code:

<!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:

Code:

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

Originally Posted by chas

<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.

Thread: Centering a table...

Thread Tools

Search Thread

Centering a table...

Bookmarks

Bookmarks

Posting Permissions