We help IT Professionals succeed at work.

Center a table

jonofat
jonofat asked
on
284 Views
Last Modified: 2012-05-11
I have a single table that I want to put dead center in the page. I can align it in the center but then I have to press space bar to get it down to the actual middle of the page. Depending on your resolution, it doesn't always stay in the center.
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2015
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Commented:
Nest your table in another table.

<?php
echo '<html><head></head><body>';
echo '<table>';
echo '<tr><td align="center">';
//<!- your inner table HERE ->
echo '</td></tr>';
echo '</body></html>';
?>

Commented:
sorry read that as centered on the page, not in the middle of the page.
you would have to add valign="middle"

Author

Commented:
Not sure if I explained properly. I can't seem to get your methods to work. Please see the screen shot I took. screen shot
CERTIFIED EXPERT
Top Expert 2015

Commented:
The screen shot shows that the login table is not centered vertically in the window, but it does not indicate which method you used or what went wrong. Can you copy the "view source" of that page and post it here?

Author

Commented:
<table width="25%" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder">
    <tr>
      <td colspan="2" align="center">&nbsp;</td>
    </tr>
    <tr>
      <td width="50%" align="center" class="loginfont"><strong>Username</strong>:</td>
      <td width="50%"><label for="1"></label>
        <input type="text" name="1" id="1" /></td>
    </tr>
    <tr>
      <td align="center" class="loginfont">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="center" class="loginfont"><strong>Password</strong>:</td>
      <td><label for="2"></label>
        <input name="2" type="password" id="2" size="20" /></td>
    </tr>
    <tr>
      <td colspan="2" align="center">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input type="submit" name="button" id="button" value="Submit" /></td>
    </tr>
    <tr>
      <td colspan="2" align="center">&nbsp;</td>
    </tr>
  </table>

Open in new window

CERTIFIED EXPERT
Top Expert 2015

Commented:
Sorry, still not enough information. You are showing the html for the login table but not your method for centering it in the browser window.

If you are using the jquery method that I suggested, your markup should look like the snippet below with the jquery-1.2.6.min.js file copied to the appropriate folder.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>

<script type="text/javascript">

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame() 
{
    var divHeight = 300;
    var h = $(window).height();
    $("#content").css('margin-top', (h > divHeight) ? ((h - divHeight)/2) : 20)
}
 </script>
<title>Untitled Page</title>
</head>
<body>
<div id="wrapper" style="width:100%;height:100%;border:solid 2px black;">
<div id="content" style="margin:10px;width:98%;height:300px;border:solid 2px green;">
<table width="25%" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder">
    <tr>
      <td colspan="2" align="center">&nbsp;</td>
    </tr>
    <tr>
      <td width="50%" align="center" class="loginfont"><strong>Username</strong>:</td>
      <td width="50%"><label for="1"></label>
        <input type="text" name="1" id="1" /></td>
    </tr>
    <tr>
      <td align="center" class="loginfont">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="center" class="loginfont"><strong>Password</strong>:</td>
      <td><label for="2"></label>
        <input name="2" type="password" id="2" size="20" /></td>
    </tr>
    <tr>
      <td colspan="2" align="center">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input type="submit" name="button" id="button" value="Submit" /></td>
    </tr>
    <tr>
      <td colspan="2" align="center">&nbsp;</td>
    </tr>
  </table>
</div>
</div>
</body>
</html>

Open in new window

Author

Commented:
That is probably my problem. I don't have that jquery-1.2.6.min.js file you are talking about. Where can I get it and where must I put it?
CERTIFIED EXPERT
Top Expert 2015

Commented:
It can be downloaded from many web sites, here's one:

http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&can=2&q=

Create a folder under your main folder called scripts and place it in there. Then the snippet will work as written.
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Okay, I have done all that but it still isn't in the center. Take a look at the screen shot.  screen dump

Commented:
copied an pasted exactly like that i get

ie.jpg
chrome.jpg

Commented:
You must have something else in the code, i set 'border = "0"', your screenshot shows a border?
CERTIFIED EXPERT
Top Expert 2015

Commented:
From your screen shot, I can see that you are using the jquery method. Can you paste the entire "view source" so I can troubleshoot.

Or, try @owner66 method instead.

Author

Commented:
Aha, because my file wasn't in the root, I needed to make the path ../scripts instead of just scripts.
Works now! Thanks guys. Points on the way.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.