我正在尝试构建一个简单的网页。我正在使用表格元素，并且几乎完全按照我的意愿拥有页面。我想知道如何将“隐藏，数量，总计”信息块对齐到表格顶部，同时推动两个计算信息块对齐底部？如果可能的话，我不想在代码中添加大量的 div 元素。
这是我在图形位置的屏幕截图。
这就是我想要的布局。
https://docs.google.com/spreadsheet/ccc?key=0AtN1GjoOX2c4dHFmdDlrcy03YXMyQm02bjFOeW1fb2c&usp=sharing
<html>
</head>
<body>
<center>
<h1>GF5F Bail Wave Calculator</h1>
<p>
<table>
<tr>
<td valign= "top">
<table class="dropshadow">
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center"><b> Mansion Level </b></td>
</tr>
<tr >
<td><input type= "number" id= "mansionlvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "mansionpct" /></td>
</tr>
</table>
<table class="dropshadow"><hr />
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Law Firm Level <b><mark class= "special1" >(FN)</mark></b></td>
</tr>
<tr>
<td><input type= "number" id= "lawfnlvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "lawfnpct" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Law Firm Level <b><mark class= "special1" >(GV)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "lawgvlvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "lawgvpct" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Law Firm Level <b><mark class= "special1" >(BK)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "lawbklvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "lawbkpct" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Law Firm Level <b><mark class= "special1" >(PA)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "lawpalvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "lawpapct" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Law Firm Level <b><mark class= "special1" >(AC)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "lawaclvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "lawacpct" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Law Firm Level <b><mark class= "special1" >(CT)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "lawctlvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "lawctpct" /></td>
</tr>
</table>
<table class="dropshadow"><hr />
<tr>
<td class= "headfont" headers= "name" ><b> Total % </b></td>
</tr>
<tr>
<td><input readonly= "true" type= "number" id= "totalpct" /></td>
</tr>
</table>
</td>
<td valign="top">
<table class="dropshadow">
<tr>
<td class= "headfont" headers= "name" ><b> Default Jail Capacity </b></td>
</tr>
<tr>
<td><input readonly="true" type = "number" id = "jailcap" value="2000"/></td>
</tr>
</table>
<table class="dropshadow"><hr />
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Safe House <b><mark class= "special1" >(FN)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "shfnlvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "shfncap" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Safe House <b><mark class= "special1" >(GV)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "shgvlvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "shgvcap" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Safe House <b><mark class= "special1" >(BK)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "shbklvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "shbkcap" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Safe House <b><mark class= "special1" >(PA)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "shpalvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "shpacap" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Safe House <b><mark class= "special1" >(AC)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "shaclvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "shaccap" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" colspan= "2" align= "center" ><b> Safe House <b><mark class= "special1" >(CT)</mark></b></td>
</tr>
<tr >
<td><input type= "number" id= "shctlvl" value= "1" min= "1" max= "12" /></td>
<td><input readonly= "true" type= "number" id= "shctcap" /></td>
</tr>
<table class="dropshadow"><hr />
<tr>
<td class= "headfont" headers= "name" ><b> Total Jail Capacity </b></td>
</tr>
<tr>
<td><input readonly= "true" type= "number" id= "totalcap" /></td>
</tr>
</table>
</td>
<td valign="bottom">
<table class="dropshadow">
<tr>
<td class= "headfont" headers= "name" align= "center" ><b>Hide Outs</b></td>
<td class= "headfont" headers= "name" align= "center" ><b>Qty</b></font></td>
<td class= "headfont" headers= "name" align= "center" ><b>Total</b></font></td>
</tr>
<tr>
<td class= "headfont" headers= "name" align= "center" ><b>Level 10</b></font></td>
<td><input type = "number" id = "l10qty" value="0" min="0" max="99" /></td>
<td><input readonly="true" type = "number" id = "l10tot" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" align= "center" ><b>Level 11</b></font></td>
<td><input type = "number" id = "l11qty" value="0" min="0" max="99" /></td>
<td><input readonly="true" type = "number" id = "l11tot" /></td>
</tr>
<tr>
<td class= "headfont" headers= "name" align= "center" ><b>Level 12</b></font></td>
<td><input type = "number" id = "l12qty" value="0" min="0" max="99" /></td>
<td><input readonly="true" type = "number" id = "l12tot" /></td>
</tr>
</table>
<table class="dropshadow"><hr />
<tr>
<td class= "headfont2" headers= "name" ><b> MAX Bailable Units </b></td>
</tr>
<tr>
<td><input readonly= "true" type= "number" id= "bailtroops" /></td>
</tr>
<tr>
<td class= "headfont2" headers= "name" ><b> Sacrificial Units Required </b></td>
</tr>
<tr>
<td><input readonly= "true" type= "number" id= "sactroops" /></td>
</tr>
<tr>
<td align="right"><button onclick="Calculate()">Calculate</button></td>
</tr>
</table>
<table class="dropshadow" ><hr />
<tr>
<td class= "headfont3" headers= "name" ><b> Bailable Units </b></td>
</tr>
<tr>
<td><input type = "number" id = "bailnum" value="0" min="0" /></td>
</tr>
<tr>
<td class= "headfont3" headers= "name" ><b> Sacrificial Units Required </b></td>
</tr>
<tr>
<td><input readonly= "true" type= "number" id= "sacnum" /></td>
</tr>
<tr>
<td align="right"><button onclick="Calculate2()">Calculate</button></td>
</tr>
</table>
</td>
</tr>
</table>
</p>
</center>
</body>
</html>