HTML講座

表の作り方

(01/6/4作成)

(01/6掲載予定)

　HTMLとは、「H Technique Make Love」という、日本語訳を載せたらちょっと恥ずかしい言葉の略語です。・・・というのは、お約束のボケ。そのうち、｢まちがい略語辞典｣でも作りましょうか。
　本当は、「Hyper Text Markup Language」、「タグ」と呼ばれる「<>」で囲まれた文字列の集まりから成る、ホームページ専用の言語のことです。今皆さんがご覧になっているホームページというものは、このタグで示された指令を、ブラウザが読み取って目に見える形にしたものなのです。

　ホームページを作るということは、このHTMLを使ってテキストファイルを作成するということなのですが、普通はそんな面倒くさいことはしません。私が愛用している「ホームページビルダー」のようなホームページ作成ソフトがたくさん発売されていますから、それを使えばHTMLのことを知らなくても、簡単にホームページを作ることは出来るのです。これらのソフトは、普通の文書を作る感覚で作業を行っていると、自動的にHTMLが書けてしまっているという、すぐれものなのですね。
　例えば、表を作ろうと思ったら、「表の作成」かなんかの機能を使えば、こういうものが出来るはずです。

A	B
C	D

これは、HTMLではこうなります。

<TABLE border="1" cellpadding="5">
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>

ここで使われているタグは、<TABLE><TR><TD>の３種類。<TABLE>は表全体、<TR>は表の行、<TD>は一つ一つのセル。それぞれのタグは、この「開始タグ」と、スラッシュがついた「終了タグ」（</TABLE>など）でワンセットになっており、挟まれた部分が、そのタグが示す内容になります。さらに、タグの中の属性を指定することによって、細かい変化をつけることが出来ます。ここでは、<TABLE>タグの中にある「border="1"」、「cellpadding="5"」というのが、このタグの属性で、この場合はそれぞれ「表の枠の幅を１ピクセルにする」、「セル内の余白を５ピクセルにする」という指定です。これを例えば「border="3" cellpadding="10"」にすると、こんな風になります。

A	B
C	D

表の枠の幅が広がりましたね。さらに、セル内の空白が大きくなったため、セル自体が大きくなりました。

　と、ここまでが、ホームページ作成ソフトでできることです。しかし、こうやって作られた表というのは、罫線と言うよりはまるで阿武隈川の土手（角田に行く途中に見えます）みたいな形のもので囲まれていて、なんだかみっともないですね。「これがいかにもホームページらしくていい」という人はいるかもしれませんが、私のようにこんな

A	B
C	D

「普通の」表が使いたいという人には、ちょっと物足りません。
　そう、こういう、普通の罫線が入った表は、HTMLをちょっといじるだけで、簡単に作ることが出来るのです。見てみましょう。

<TABLE border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
<TR>
<TD>
<TABLE border="0" cellpadding="5" cellspacing="1">
<TR bgcolor="#ffffff">
<TD>A</TD>
<TD>B</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

　まず、属性の説明。「border」、「cellpadding」はさっき書きましたね。「cellspacing」はセルの間の隙間の幅、「bgcolor」は背景の色です。「#000000」は黒、「#ffffff」は白になります。見てお分かりのように、ここには<TABLE>タグが２つあります。つまり、表の中にさらにもうひとつ表を作っているのです。そして、外側の表は背景が黒ですから、その中に背景が白の表を作れば、セルの隙間が黒い罫線として現われてくるというわけです。
　ですから、中の表のcellspacingの値を変えることにより、罫線の幅を変えることが出来るわけです。さらに外の表のcellpaddingを変えることによって外枠の幅だけ、より太くすることも出来ます。例えば、

<TABLE border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
<TR>
<TD>
<TABLE border="0" cellpadding="5" cellspacing="3">
<TR bgcolor="#ffffff">
<TD>A</TD>
<TD>B</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

とすれば、こういう表になります。外枠は３＋２で５ピクセルになっています。

A	B
C	D

　さあどうでしょう、これで、きれいな表の作り方はマスターできましたか？念のために付け加えておきますが、このタグを使う場合には、必ず「ソース」からコピーしてくださいね。「青のり」と「かつお節」もお忘れなく（笑）。