シンプルなWebページを構築しようとしています。私はテーブル要素を使用しており、ほぼ希望どおりのページを作成しています。「hideout、qty、total」情報のブロックをテーブルの上部に配置する方法を知りたいのですが、その間に2つの計算ブロックの情報を押して下部に配置しますか? 可能であれば、大量の 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>