?
Solved

Center a table

Posted on 2011-04-25
15
Medium Priority
?
270 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.
0
Comment
Question by:jonofat
  • 5
  • 5
  • 5
15 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 1000 total points
ID: 35459952
The only way to do this with any consistancy is to detect the current window size after the page is rendered, then move the table to the vertical center. Here's one method using jquery. Put your table inside the content div and adjust the height and width as desired. The borders are included just so you can see what's going on.
<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;"></div>
</div>
</body>
</html>

Open in new window

0
 
LVL 4

Expert Comment

by:owner66
ID: 35459969
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>';
?>
0
 
LVL 4

Expert Comment

by:owner66
ID: 35459999
sorry read that as centered on the page, not in the middle of the page.
you would have to add valign="middle"
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:jonofat
ID: 35460098
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
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35460141
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?
0
 

Author Comment

by:jonofat
ID: 35460175
<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

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35460229
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

0
 

Author Comment

by:jonofat
ID: 35460273
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?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35460316
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.
0
 
LVL 4

Assisted Solution

by:owner66
owner66 earned 1000 total points
ID: 35460374
Here one that works, your table nested inside code from htmlcssdeveloper.com
<!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>
<style>
html, body
{
margin:0px;
padding:0px;
width:100%;
min-height:100%;
height:100%;
}
.outer_table
{
width:100%;
height:100%;
}
.content_table
{
background-color:#FFC;
}
</style>

<title>Cenetering Table</title>
</head>
<body>

    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="outer_table">
    <tr>
    <td>
    <table width="500" height="300" cellpadding="0" cellspacing="0" border="0" align="center" class="content_table">
    <tr>
    <td align="center">
    <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>

    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
</body>
</html>

Open in new window

0
 

Author Comment

by:jonofat
ID: 35460392
Okay, I have done all that but it still isn't in the center. Take a look at the screen shot.  screen dump
0
 
LVL 4

Expert Comment

by:owner66
ID: 35460436
copied an pasted exactly like that i get

ie.jpg
chrome.jpg
0
 
LVL 4

Expert Comment

by:owner66
ID: 35460465
You must have something else in the code, i set 'border = "0"', your screenshot shows a border?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35460469
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.
0
 

Author Comment

by:jonofat
ID: 35460512
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.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The title says it all. Writing any type of PHP Application or API code that provides high throughput, while under a heavy load, seems to be an arcane art form (Black Magic). This article aims to provide some general guidelines for producing this typ…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month17 days, 7 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question