SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast Splints's Avatar
    Join Date
    Jun 2003
    Location
    South Africa
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering tables

    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

  2. #2
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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

  3. #3
    011521 dbalsdon's Avatar
    Join Date
    Feb 2003
    Location
    North Of Scotland
    Posts
    444
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    Daniel Balsdon
    My Site

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  5. #5
    SitePoint Member mcintyrc's Avatar
    Join Date
    Dec 2002
    Location
    Lafayette, IN
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Thanks -- Chris
    Get Funny T-Shirts and Custom Printed T-Shirts @ ShirtsByMail.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    SitePoint Member mcintyrc's Avatar
    Join Date
    Dec 2002
    Location
    Lafayette, IN
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, Paul....I just saw the CSS. Should have read further
    Thanks -- Chris
    Get Funny T-Shirts and Custom Printed T-Shirts @ ShirtsByMail.com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    No problems I do it all the time and then realise I should have read further down

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •