「あっと驚くためごろう、ひょう！」シリーズも４回目となりました。
今度は表のセルの背景に色を付けたり、枠線に工夫をしてみることに挑戦してみます。
まずは、セルの背景に変化をつけてみましょう。これはナイスなバディの <BODY>～</BODY>タグが登場したときに使った方法を思い出していただければ簡単かな。
本文の背景に色をつけたり、壁紙を表示させたいときに次のようにタグを書きました。
たとえば、背景色を指定する場合ならば <BODY BGCOLOR="色">本文</BODY>としましたし、
背景に壁紙として画像を使う場合ならば<BODY BACKGROUND="画像名">本文</BODY>のように書きました。
セルの背景を指定するのですから、<TD>～</TD>に手を加えてやれば良いわけですね。ということは、
<TD BGCOLOR="色">～</TD>
ということで、このように記述すればセルの背景に色が付くだろうということが分かります。色の指定方法は前にも書いたとおりで、色の名前を英字で書くか、RRGGBB方式で書きましょう。
壁紙を背景にしたいのであれば、こんな感じかな。
<TD BACKGROUND="背景の画像">～</TD>
さて、上の二つを使って、実際にタグを書いてみましょう。このとき、セルの幅を指定したいので、WIDTH や HEIGHT も使ってみます。
前に書きましたが、セルの幅は中に入るデータの幅によって決まりますが、あらかじめ幅を指定することもできます。どのセルも同じ幅にしたい時には使えますね。
（ table14.htm ）
<table border>
<caption align="bottom">どっかの国の国旗かな</caption>
<tr>
<td bgcolor="blue" width="50" height="150"> </td>
<td bgcolor="white" width="50" height="150"> </td>
<td bgcolor="red" width="50" height="150"> </td>
</tr>
</table>
上の例の場合、セルの中身はそれぞれ全角の空白（スペース）のみです。こんな遊び方もできちゃうってことですね。
こんなふうに見えるはずです。
さて、今度はセルの背景に壁紙を使ってみましょう。僕の場合は Windowsディレクトリの中に入っているファイル、花見.bmp ｴｼﾞﾌﾟﾄ.bmp ｼｬﾎﾞﾝ玉.bmp を フリーソフトの IrfanViewでgifファイルに変換し、それぞれ hanami.gif、egypt.gif bubble.gif として保存しました。bmpファイルをそのまま使うのを避けるためです。
前にも書きましたが、bmpファイルは Internet Explorer では表示はされますが使わないほうが良い画像の種類です。
今までの復習も含めて、三つの壁紙をセルの背景に表示させるタグを書いてみました。コメントタグで補足説明を入れてます。
ちょっと複雑そうに見えるかもしれませんが、タグをじっくり見るともう役割が見えてきているのではないでしょうか。
コメントタグ、覚えていらっしゃいますよね。タグの中に補足説明を書くためのもので、ブラウザ上には反映されないので、何を書いても安心です。<!--コメント文-->というふうに記述します。
（ table15.htm ）
<html><head><title>ひょう！テーブルタグだぁ！第４回</title></head>
<!--HTMLドキュメントを宣言、タイトルを設定-->
<body>
<!--本文の始まり、始まり-->
<table border width="450" height="300">
<!--枠線付きの表、サイズを横450ピクセル縦300ピクセルに設定-->
<caption align="bottom">セルの背景に壁紙を</caption>
<!--表の下部にタイトルを指定-->
<tr>
<!--表の１列を作ります-->
<td background="hanami.gif" width="150" height="100" align="center">
<!--セルを横150縦100ピクセルに指定、背景に壁紙を指定、センタリング指定-->
<font color="red">花見</font></td>
<!--フォントの色を赤に指定、花見-->
<td background="bubble.gif" width="150" height="100" align="center">
<!--シャボン玉を背景に指定、同上-->
<font color="#ffffff">シャボン玉</font></td>
<!--フォントの色をRRGGBB方式で白に指定、シャボン玉-->
<td background="egypt.gif" width="150" height="100" align="center">
<!--エジプトを背景に指定、同上-->
<font color="#00ffff">エジプト</font></td>
<!--フォントの色をRRGGBB方式で青に指定、エジプト-->
</tr>
<!--列を閉じる-->
</table>
<!--テーブルを閉じる-->
</body>
<!--本文を閉じる-->
</html>
table15.htm とでも名付けて保存して、ブラウザで確認してみましょう。
画像の名前と置いておく場所（ディレクトリ）は皆さんのパソコンによって異なりますので、きちんと壁紙を表示させるためには、table15.htm を置いておく場所と同じ場所に画像ファイルをコピーしておきましょう。
C:\My Documentsの中に table15.htm を置いておくのなら、画像ファイルも同じくそこに置いておく必要があるということですね。
では、次です。今度は外枠線の太さを指定して遊びましょう。書き方はもう想像つきますよね。
何度も書いている <table border>～</table>にちょっと追加すれば良いだけです。
<TABLE BORDER="外枠線の太さ(ピクセル数)">表の中身</TABLE>
これで良いはずです。こんなタグをかいてみました。
（ table16.htm ）
<table border="0">
<tr><td>みつりん</td></tr>
<tr><td>ひでりん</td></td>
</table>
<p>
<table border="1">
<tr><td>いがちん</td></tr>
<tr><td>未知</td></td>
</table>
<p>
<table border="5">
<tr><td>夜郎</td></tr>
<tr><td>幽</td></td>
</table>
<p>
<table border="8">
<tr><td>にゃんこ</td></tr>
<tr><td>あやめ</td></td>
</table>
表が縦に四つ並んでいて、一番上が枠線なし、二番目が外枠線の太さ１ピクセルで、これは単に<table border>～</table>と枠線の太さを指定しなかった場合と同じです。三番目が枠線の太さ５ピクセル、四番目が８ピクセルです。table16.htm とでも名付けて保存し、ブラウザで確認してみるとこうなるはずです。
では、最後の練習です。今度はセルの中の枠線の太さを指定したり、枠線とセルの中身とのスペースに変化を持たせてみたいと思います。この時もタグにオプションを付加します。まとめて書いてみると、次のようになります。
<TABLE BORDER="外枠の太さ">～</TABLE>
外枠の太さに変化を持たせたいときに指定します。<TABLE BORDER>とだけ書いた場合は太さが１ピクセルになります。
<TABLE BORDER CELLSPACING="セル枠線の太さ">～</TABLE>
表の外枠とセルの枠線の間の間隔を指定したい時に記述します。CELLSPACING="セルの枠線の太さ"を指定しない場合は、標準の２ピクセルを指定することになります。
<TABLE BORDER CELLPADDING="セル枠線とセルの中身との間隔">～</TABLE>
セル枠線とセルの中身（テキストや画像）との間隔を指定します。何も書かない場合は標準で１ピクセルの間隔が指定されます。
文字だけの説明だとちょっと伝わりにくいと思いますので、では、サンプルタグを以下のように書いてみます。それぞれのピクセル数をいろいろ変更してみると見え方がいろいろと変化して面白いかもね。(^_^)
（ table17.htm ）
<html>
<head>
<title>枠線の太さや間隔を変えて遊びましょう</title>
</head>
<body>
<table border="1" cellspacing="2" cellpadding="1" width="300">
<!--↑単に<table border>と指定した場合と同じ設定ですね-->
<caption align="bottom">標準設定の例</caption>
<tr><td>みつりん</td></tr>
<tr><td>ひでりん</td></tr>
</table>
<table border="8" cellspacing="2" cellpadding="1" width="300">
<!--↑外枠線を8ピクセルに、その他を標準の設定にします-->
<caption align="bottom">外枠線のみ8ピクセルに設定</caption>
<tr><td>いがちん</td></tr>
<tr><td>未知</td></tr>
</table>
<table border="1" cellspacing="16" cellpadding="1" width="300">
<!--↑セル枠線の間隔を16ピクセルに設定、その他は標準の設定です-->
<caption align="bottom">枠線同士の間隔を16ピクセルに</caption>
<tr><td>夜郎</td></tr>
<tr><td>幽</td></tr>
</table>
<table border="1" cellspacing="2" cellpadding="8" width="300">
<!--↑枠線とテキストとの間隔を8ピクセルに設定しています-->
<caption align="bottom">セル枠線とテキストの間隔を8ピクセルに</caption>
<tr><td>にゃんこ</td></tr>
<tr><td>あやめ</td></tr>
</table>
</body>
</html>
これを table17.htm とでも名付けて保存して、ブラウザで確認してみます。見え方の都合でセルを横長にして、下部にタイトルをつけました。今までの総復習という感じですね。
では、あっと驚くためごろう、ひょう！シリーズはここまでとします。
次回からはフォーム（入力欄）を作って遊ぼうと思っています。
