align text outside table with column in table in CSS - css

Question

I have a table with 9 columns, and under column 8, I want to print that column's total (which I have stored in a variable). How do I align the text so that it appears under column 8?
I currently have the total in a h5 tag, but if that prevents the alignment, I'm willing to change it.
<table> ...stuff
</table>
<h5>TOTAL!</h5> <---- this should appear under column 8 of the table

Answer 1

The best route would be to have it in the table itself however if that isn't an option, align your h5 by using javascript. Get the x offset of column 8 and apply that value to your h5. If you can provide a more full example of your markup I can provide an example.
Edit:
Since you didn't provide markup I created an example. You should be able to apply the gist of it to your code.
html
<table>
<thead>
<tr>
<td>head 1</td>
<td>head 2</td>
<td id="totalcol">head 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
</tr>
</tbody>
</table>
<p id="total">Some total</p>
js
var left = $('#totalcol').offset().left;
$("#total").css("margin-left",left);
http://jsfiddle.net/H62wV/

Answer 2

Assuming all columns are of equal width:
.p9 { /* p9 for 9 column table of equal width */
width: 11%;
}
h5 {
margin-left: 88%; /* 11 x 8 */
}
<table>
<tr>
<td class="p9">
...
</td>
</tr>
</table>
<h5>TOTAL!</h5>

Answer 3

Is your table an actual HTML table or CSS divs behaving like a table?

Answer 4

I believe that if you are going the table way, you should take it till the end.
To show a third column total, I would do:
<TABLE>
<THEAD>
<TR>
<td>head 1</td>
<td>head 2</td>
<td>head 3</td>
</tr>
</THEAD>
<TFOOT>
<TR>
<td></td> <<-- notice the empty cells
<td></td>
<td>TOTAL</td>
</tr>
</TFOOT>
<TBODY>
<TR>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
</tr>
</TBODY>
</TABLE>
This way the alignment is automatic.
(Notice that the footer recomended position is before the body)