TABLE の自動作成


HTMLのタグを使いこなして自分でホームページを作る人にとっても、悩みの種は、同じタグを連続して数多く書かなければならないときです。 特に、TABLE タグを使って何十項目もある表を作らなければならないときは、<TR> や <TD> の繰り返しはうんざりする機械的作業となることがあります。 多くの人が既成のHP作成ソフトに奔ってしまう理由も1つにはそこにあるのかも知れません。

でも、こうした機械的作業を省力化できるのがコンピュータの良いところです。やることは決まっているのですから、タグやその中での定義は自動作成させましょう。

下のサンプルでは、それぞれのオプションを選択してからOKボタンをクリックすると、その下のテキストエリアにタグが自動作成されます。 最後に「終了」ボタンをクリックすると TABLE の完成です。「プレビュー」ボタンをクリックすると別ウィンドウが開いて仕上がりを見ることができます。 「選択」ボタンをクリックするとテキストエリア内のタグ全体が反転表示されるので、これをコピーして HTML ファイル内の必要箇所に貼り付けて使用して下さい。

使い方

水色の枠内では TABLE 全体を定義します。
横幅(width) 数値を半角で入力し、ピクセル(絶対値)かパーセント(画面内での相対値)かを選択します。TABLE の横幅を強制的に決めたい場合にのみ使用します。 数値を入力しなければ無視されます。
枠の立体化(border) 0だと枠を非表示に、1だと白抜きの枠に、それ以上だと枠を立体的に見せます。「指定しない」場合は0と同じになります。
枠の太さ(cellspacing) 枠内のスペースを決めます。例えば「枠の立体化」を1に、「枠の太さ」を0にすると、太線のような枠になります。
セル内の空白(cellpadding) 枠と文字の間のスペースを決めます。0または「指定しない」と、枠と文字の間がぴっちりした感じになります。
表の背景色(bgcolor) TABLE 全体の色を決めます。セルの中で背景色を指定している場合には適用されません。
OKボタンをクリックすると指定したとおりのタグがテキストエリアに入力されます。このボタンを使うのは1つの TABLE に1回だけです。

サクラ色の枠内では個々のセル(TD)を定義します。
セルを横に(colspan)・縦(rowspan)に抜く、とは、そのセルが横に何列、或いは縦に何行またがるかを決めるものです。 普通は、またがりませんから、デフォルトの1でOKです。
位置(align) 文字をセルのどちら側に寄せるか中央に置くかを決めます。デフォルトは左寄せです。
セル色(bgcolor) そのセルの背景色を決めます。「表の背景色」を指定していても、こちらが優先されます。
文字 「太字」を選択すると、TD の代わりに TH が使われます。文字を強調するために使います。
文字のサイズ(FONT size) 文字のサイズを1から7までの7段階で決めます。
文字色(FONT color) 文字通り、文字の色です。セル色との兼ね合いに注意しなければなりません。
第□列 とは、ここで定義しているセルが何列目(左から数えて何セル目)かを示します。すでに作られたセルの数ではないので注意して下さい。 セルを横に複数個抜いた場合には、その分加算されます。
入力ボックスには、セルに入れたい文字列を入れます。セルを空白にしたいときは、何も入れずにOKボタンを押して下さい。 画像などを入れたい場合には、<IMG SRC="nantoka.gif"> のように、タグを入力します。
OKボタンをクリックすると指定したとおりのタグがテキストエリアに入力されます。このボタンは、使いたいセルの数だけ、何度でもクリックできます。

黄色の枠内では改行(TR)、及び TABLE の完成を決定します。
第□行 とは、ここで定義しているセルが何行目(上から数えて何セル目)かを示します。セルを縦に複数個抜いた数は(混乱を避けるため)加算されません。
次行へ とは、1つの行(TR)が終わって(</TR>)次の行へ行きたいときにクリックするものです。
「終了」ボタンは、TABLE を完成させるときに(従って、最後1回だけ)クリックします。これをクリックしない場合は、「プレビュー」ボタンを押しても無効です。

横幅 ピクセル パーセント 枠の立体化 枠の太さ
セル内の空白 表の背景色
セルを 横に 縦に 抜く 位置 左寄せ 中央 右寄せ セル色
文字 普通 太字 文字のサイズ 文字色





このプログラムの目的は、TABLE タグとその中の定義を自動作成することにあり、飽くまで HTML にペーストして使用するためのものです。 テキストエリア内に自分で直接入力したり、削除したりしても構いません。 ここで定義していない valign などの設定を使いたいときは、自分で書き込んで下さい。また、訂正したいときにも自分で削除することができます。




次のトピックは「HTML と JavaScript」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで