３章 タグ


Dテーブル（table）

おそらくこのテーブルタグが今回のこのコーナーの中で一番奥が深いタグでしょう。それだけにチョット
難しさを感じるかもしれない出れど、使いこなせるようになればHPの見た目が格段によくなります（自分
自身もチャンと使いこなしてはいないんですが・・・(^^;）

<html>
<head>
<title>MaNaPage</title>
</head>
<body bgcolor="yellow">
<center>
<font size="+4" color="#0000FF"><b><i>MaNaPage</i></b></font>
<hr>
タイトルの後はいよいよ本文の打ちこみ、だんだんHPぽくなってきたかな？<br>
だんだんタグも増えてきたけれど、後もうチョットだからがんばっていきましょう(^0^)！<br>
<table border="1" bordercolor="#CC00FF">
<tr><td>巨人</td><td>中日</td><td>横浜</td></tr>
<tr><td>ヤクルト</td><td>広島</td><td>阪神</td></tr>
</table>
 </center>
</body>
</html>
　ソース上での入力
↓
MaNaPage
タイトルの後はいよいよ本文の打ちこみ、だんだんHPぽくなってきたかな？
だんだんタグも増えてきたけれど、後もうチョットだからがんばっていきましょう(^0^)！
巨人中日横浜
ヤクルト広島阪神
　HTMLファイルへの表示
図3-5-1 テーブル設定の例

<table>●</table>

上の図3-4-1のようにこのtableタグは、表をレイアウトをするタグですが、単純に表だけじゃなくページ
全体のレイアウトを調整したりと、HP作りにおいて大変重要な役割を果します。基本的に、このtableタグ
は全体を司る<table>、行を司る<tr>、マスを司る<td>の３つによって構成されています。図3-5-2を
見てください。

<table>
<tr><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td></tr>
<tr><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td></tr>
<tr><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr>
<tr><td>た</td><td>ち</td><td>つ</td><td>て</td><td>と</td></tr>
</table>
　ソース上での入力
↓

あいうえお
かきくけこ
さしすせそ
たちつてと

　HTMLファイルへの表示
図3-5-2 基本的なテーブルタグの仕様例

上の図のように、<table>の中に<tr>を、そしてその<tr>の中に<td>のタグを入れて構成します。ただし、
この例のように属性を全く設定していない場合は、実際には境界線は無く、背景も無色になります（ページ
の背景が透過されます）。実際に、上図の様に線や色をつけるためには図3-5-3の様に属性をつけます。

<table border="3" bordercolor="#00FF00">
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>た</td><td>ち</td><td>つ</td><td>て</td><td>と</td></tr>
</table>
　ソース上での入力
↓

あいうえお
かきくけこ
さしすせそ
たちつてと

　HTMLファイルへの表示
図3-5-3 テーブルの線・背景の設定例

「border="数字"」で線の太さ、「bordercolor="色"」で線の色、「bgcolor="色"」でマスの背景色を設定
します。

このテーブルタグは何個かのマスをを１つのマスに結合させることができます。結合の方法は縦と横の
場合で違います。縦のマスの結合は図3-5-4をご覧下さい。

<table border="3" bordercolor="#00FF00">
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td rowspan="4">あかさた</td><td>い</td><td>う</td><td>え</td><td>お</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>き</td><td rowspan="2">くす</td><td>け</td><td rowspan="3">こそと</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>し</td><td>せ</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>ち</td><td>つ</td><td>て</td></tr>
</table>
　ソース上での入力
↓

あかさたいうえお
きくすけこそと
しせ
ちつて

　HTMLファイルへの表示
図3-5-4 縦の結合例

この「rowspan="数字"」の属性で設定します。数字によって何個のマスを結合するかを決めます。
縦の場合も同じく属性によって設定します。図3-5-5を参照してください。

<table border="3" bordercolor="#00FF00">
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td colspan="5">あいうえお</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>か</td><td colspan="3">きくけ</td><td>こ</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>た</td><td>ち</td><td>つ</td><td colspan="2">てと</td></tr>
</table>
　ソース上での入力
↓

あいうえお
かきくけこ
さしすせそ
たちつてと

　HTMLファイルへの表示
図3-5-5 横の結合例

縦の場合も横の場合も、結合したマスのtdタグは二重に打ちこまないように気をつけましょう。

テーブルタグの最後の属性として「cellspacing="数字"」を紹介します。要するに各々のマスの間隔を
設定する属性です。

<table border="3" bordercolor="#00FF00" cellspacing="0">
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td colspan="5">あいうえお</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>か</td><td colspan="3">きくけ</td><td>こ</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr>
<tr bordercolor="#FF0033" bgcolor="#00FFFF"><td>た</td><td>ち</td><td>つ</td><td colspan="2">てと</td></tr>
</table>
　ソース上での入力
↓

あいうえお
かきくけこ
さしすせそ
たちつてと

　HTMLファイルへの表示
図3-5-6 マス間隔の設定例

数字の部分を大きくしていくと、マスの間隔も広くなってきます。

まだテーブルタグに関しては、もう少し紹介したいテクニックがあるのですが、難しくなってくるので今回
はこの辺にしていきたいと思います。