Centering a specific table column to the page - html

Question

I have a table with two columns. I want to center the right-most column with the page so the left column would hang off to the left.
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100"><!--COLUMN TO HANG TO LEFT--></td>
<td><!--COLUMN TO BE CENTER WITH PAGE--></td>
</tr>
</table>
I'm assuming the solution will be CSS.

Answer 1

You are right - CSS is the way to go. Give the column an id or class that you can target and and in your CSS center it. Assuming your table width is where you want it, give it a width of your table subtracting the other column that is to the left.
Something like this:
HTML:
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100"><!--COLUMN TO HANG TO LEFT--></td>
<td class="center"><!--COLUMN TO BE CENTER WITH PAGE--></td>
</tr>
</table>
CSS:
td.center {
text-align: center;
width: 860px;
}
Edit: Based on the comments below, here is a sample layout just using div's instead of a table
http://jsfiddle.net/willyrybone/8eR6G/
HTML:
<div id="page-wrap">
<div id="sidebar">
<p>this is some</p>
<p>sidebar content</p>
</div>
<div id="main-content">
<p>This is some</p>
<p>centered main content</p>
</div>
<div>
CSS:
#page-wrap {
width: 960px;
margin: auto;
}
#sidebar {
float:left;
width: 100px;
background: #eee;
}
#main-content {
text-align:center;
background:#bbb;
}

Answer 2

You'll have to wrap your table in a div, and center that:
<div style="width:1060px; margin: auto">
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100">COLUMN TO HANG TO LEFT</td>
<td style="background: #ccc">COLUMN TO BE CENTER WITH PAGE</td>
</tr>
</table>
</div>
http://jsfiddle.net/9HgpM/embedded/result/