HTMLで表の左右の要素を両方上に付ける
Posted: 2012年8月14日(火) 16:24
HTMLでGMC-4のアセンブラを作っています。
ブラウザはFireFox 14.0.1です。
コードの入力欄と、結果のテーブル（またはエラーメッセージ）を両方上に揃えたいのですが、
できなくて困っています。
現在のコードだと、コードの入力欄は常に上で止まってくれるのですが、
結果のテーブルが短いとコードの入力欄の真ん中に来てしまいます。
どのようにすればいいのでしょうか？
テーブルの部分を抜粋したコードを載せます。
テーブルはresultTableクラスで、このcssを適用しています。
全体は添付しました。
よろしくお願いします。
ブラウザはFireFox 14.0.1です。
コードの入力欄と、結果のテーブル（またはエラーメッセージ）を両方上に揃えたいのですが、
できなくて困っています。
現在のコードだと、コードの入力欄は常に上で止まってくれるのですが、
結果のテーブルが短いとコードの入力欄の真ん中に来てしまいます。
どのようにすればいいのでしょうか？
テーブルの部分を抜粋したコードを載せます。
<table>
<tr>
<td>この入力欄にアセンブリコードを入力してください。</td>
<td>こちらに変換結果が表示されます。</td>
</tr><tr>
<td style="vertical-align:text-top;">
<form name="codeForm" method="GET" action="#">
<textarea name="codeInput" cols="50" rows="30"></textarea><br>
<input type="button" value="アセンブル実行" onclick="doAssemble();">
</form>
</td><td>
<span id="resultArea" style="vertical-align:text-top;">
コードを入力して「アセンブル実行」ボタンを押してください。</span>
</td></tr></table>.resultTable {
border: 1px solid black;
border-collapse: collapse;
}
.resultTable td {
text-align: center;
padding: 3px;
color: black;
border-color: black;
}
.resultTable th {
text-align: center;
padding: 3px;
background-color: #FFFFFF;
color: black;
border-color: black;
}
.resultTable .odd {
background-color: #66FFFF;
}
.resultTable .even {
background-color: #FFCC00;
}よろしくお願いします。