Centering tables

**Splints** · Jul 28, 2003 07:38

I am using Dreamweaver MX.

I have managed to centre my table from left to right.
but how do I centre it from top to bottom.

Ure help

**Webnauts** · Jul 28, 2003 07:58

Originally Posted by Splints

I am using Dreamweaver MX.

I have managed to centre my table from left to right.
but how do I centre it from top to bottom.

Ure help

CSS? How? See here: http://uaweb.arizona.edu/resources/t...css/page.shtml

**dbalsdon** · Jul 28, 2003 07:59

use valign="top/center/bottom" just select what you need.. so for your case...

<table>
<tr>
<td valign="center">This text is centered vertically</td>
</tr>
</table>

edit:
or there's CSS... as mentioned above...which is the better option...

**Paul O'B** · Jul 28, 2003 08:22

Hi,

If you want to centre the content you could use something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body {
 margin:0px;
 padding:0px;
 height:100%;
 }
table {
 width:100%;
 height:100%;
 border:1px solid #000;
 text-align:center;
 vertical-align:middle;
}
</style>
</head>
<body>
<table>
  <tr> 
	<td> 
	 Hello
	</td>
  </tr>
</table>
</body>
</html>

If you want to centre the whole table vertically and horizontally you could put it inside another table and use this instead:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body {
 margin:0px;
 padding:0px;
 height:100%;
 }
table {
 width:100%;
 height:100%;
 border:1px solid #000;
}
table.inner{
 margin-left:auto;
 margin-right:auto;
 width:20%;
 height:10%;
 text-align:center;
 vertical-align:middle;
}
</style>
</head>
<body>
<table>
  <tr> 
	<td> 
	  <table class="inner">
		<tr> 
		  <td>hello</td>
		</tr>
	  </table>
	</td>
  </tr>
</table>
</body>
</html>

Hope this helps.

Paul

**mcintyrc** · Aug 7, 2003 15:26

You could also do it this way by setting the the outside table height to 100% and placing the table for your design elements within that one:

Code:

<div align="center">
 <table width="64" border="1" cellspacing="1" cellpadding="1" align="center" height="100%">
  <tr>
   <td>
	<table width="150" border="1" cellspacing="1" cellpadding="1">
	 <tr>
	  <td>
	   <div align="center">
		put your stuff here</div>
	  </td>
	 </tr>
	</table>
   </td>
  </tr>
 </table>
</div>

Just a lazy mans idea.

**Paul O'B** · Aug 8, 2003 01:04

You could also do it this way by setting the the outside table height to 100% and placing the table for your design elements within that one:

That's what I suggested but just using css and none of that old presentational stuff that we're trying to avoid.

Html Your way:

Code:

<div align="center"> 
  <table width="64" border="1" cellspacing="1" cellpadding="1" align="center" height="100%"> 
	<tr> 
	  <td> 
 <table width="150" border="1" cellspacing="1" cellpadding="1"> 
   <tr> 
			<td> 
			   <div align="center"> put your stuff here</div> 
			</td> 
		  </tr> 
		</table> 
	  </td> 
	</tr> 
  </table> 
</div>

My html as in above post:

Code:

<table> 
   <tr> 
	 <td> 
		<table class="inner"> 
		   <tr> 
			  <td>hello</td> 
		   </tr> 
		</table> 
	 </td> 
   </tr> 
</table>

Once the css is out of the way the html is much neater and easier to manage

.

Paul

**mcintyrc** · Aug 8, 2003 07:32

Sorry, Paul....I just saw the CSS. Should have read further

**Paul O'B** · Aug 8, 2003 07:41

No problems

I do it all the time and then realise I should have read further down

Paul

User Tag List

Thread: Centering tables

Thread Tools

Display

Centering tables

Bookmarks

Bookmarks

Posting Permissions