HTMLで表の左右の要素を両方上に付ける

フォーラム(掲示板)ルール
フォーラム(掲示板)ルールはこちら  ※コードを貼り付ける場合は [code][/code] で囲って下さい。詳しくはこちら
アバター
みけCAT
記事: 6734
登録日時: 15年前
住所: 千葉県
連絡を取る:

HTMLで表の左右の要素を両方上に付ける

#1

投稿記事 by みけCAT » 13年前

HTMLでGMC-4のアセンブラを作っています。
ブラウザは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クラスで、このcssを適用しています。

コード:

.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;
}
全体は添付しました。
よろしくお願いします。
添付ファイル
gmc4asm.zip
HTML全体です。
(3.45 KiB) ダウンロード数: 119 回
複雑な問題?マシンの性能を上げてOpenMPで殴ればいい!(死亡フラグ)

しひ

Re: HTMLで表の左右の要素を両方上に付ける

#2

投稿記事 by しひ » 13年前

spanタグのstyle要素を消して、その上のtdタグにstyle="vertical-align:top;"を入れてみて下さい。
ChromeとSafariで確認。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 15年前
住所: 東海地方
連絡を取る:

Re: HTMLで表の左右の要素を両方上に付ける

#3

投稿記事 by softya(ソフト屋) » 13年前

オフトピック
なぜ今頃・・・
全部jsで組んでいるんですね。
この調子でjs版のGMC-4エミュもお願いします。

【捕捉】
良かったら、私のG4CBASICと相互リンクしましょう。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
みけCAT
記事: 6734
登録日時: 15年前
住所: 千葉県
連絡を取る:

Re: HTMLで表の左右の要素を両方上に付ける

#4

投稿記事 by みけCAT » 13年前

しひ さんが書きました:spanタグのstyle要素を消して、その上のtdタグにstyle="vertical-align:top;"を入れてみて下さい。
ChromeとSafariで確認。
できました。ありがとうございます。
softya(ソフト屋) さんが書きました:良かったら、私のG4CBASICと相互リンクしましょう。
いいですね。
もう少し(説明などを)調整してからHPにアップロードします。

【追記】アップロードしました。http://mikecat.6.ql.bz/jstool/gmc4asm/
複雑な問題?マシンの性能を上げてOpenMPで殴ればいい!(死亡フラグ)

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 15年前
住所: 東海地方
連絡を取る:

Re: HTMLで表の左右の要素を両方上に付ける

#5

投稿記事 by softya(ソフト屋) » 13年前

リンクありがとうございます。こちらからもリンクしました。
出来れば;コメントとorg擬似命令に対応してもらえると嬉しいです。

コード:

; ---------------------------------------------------
; output by GMC4ちびBASIC(G4CBASIC) Version 0.404 
; ソースファイル名「sample.bas」
; ---------------------------------------------------
; アセンブラ ソースコード「sample.s」
; ---------------------------------------------------
START:    org 0         ; PROGRAM開始
LABEL0:   TIA 0         ; 0 → Ar
          TIY 0         ; 0 → Yr
          AM            ; Ar → M[Yr]
LABEL3:   CY            ; Ar⇔Yr
          CAL SETR      ; LED SET(Yr)
          TIA 8         ; 8 → Ar
          CAL TIMR      ; Wait Ar*0.1秒
          CAL RSTR      ; LED RESET(Yr)
          TIY 0         ; 0 → Yr
          MA            ; M[Yr] → Ar
          AIA 1         ; Ar+1 → Ar
          AM            ; Ar → M[Yr]
          CIA 7         ; Ar≠7
          JUMP LABEL3   ; 実行フラグ1ならJUMP
          JUMP LABEL0   ; 実行フラグ1ならJUMP
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
みけCAT
記事: 6734
登録日時: 15年前
住所: 千葉県
連絡を取る:

Re: HTMLで表の左右の要素を両方上に付ける

#6

投稿記事 by みけCAT » 13年前

softya(ソフト屋) さんが書きました:出来れば;コメントとorg擬似命令に対応してもらえると嬉しいです。
対応してみました。確認をお願いします。
複雑な問題?マシンの性能を上げてOpenMPで殴ればいい!(死亡フラグ)

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 15年前
住所: 東海地方
連絡を取る:

Re: HTMLで表の左右の要素を両方上に付ける

#7

投稿記事 by softya(ソフト屋) » 13年前

みけCAT さんが書きました:
softya(ソフト屋) さんが書きました:出来れば;コメントとorg擬似命令に対応してもらえると嬉しいです。
対応してみました。確認をお願いします。
ありがとうございます。対応を確認しました。
こちらの説明も変更しました。
「G4CBASIC「GMC-4(FXマイコン)専用ちびBASICクロス・コンパイラ」」
http://softyasu.net/g4cbasic.html
※ 私のサイトはページ内にアフィリエイトリンク(Amazon等)が含まれています。ご注意ください。
※ これは「アフェリエイト、特定サイトへの不正な誘導等、個人の極端な利益目的にコメントを投稿する行為」のつもりはありません。

このトピック見てGMC-4に興味を持った方へ。
この機会にGMC-4で機械語・アセンブラに慣れ親しんで頂くと嬉しいです。
実機を買わなくても無料でGMC-4を遊べるエミュレータがあります。
「FX-マイコン シミュレータ」
http://homepage2.nifty.com/kocha_web/fxms/fxms.html
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

閉鎖

“C言語何でも質問掲示板” へ戻る