テーブルレイアウトは主流になったテクニックで、ブラウザ上に表を組み、文字や画像を配置します。現在でもこのレイアウトを使っているサイトは多いです。
テーブルを構成するタグ
テーブルを構成するタグは主に<table>、<tr>、<td>の３種類です。終了タグも必要です。
役割は以下の通りです。
<table> テーブル構造の定義を示す
<tr> テーブルの行を定義（必要な行の数だけ定義）
<td> テーブルの項目を定義（必要な数だけ定義）
前ページで紹介した市野接骨院のソースをご覧になってみて下さい。
<tr>と<td>が終了タグとともにたくさん並んでいるのが確認できますでしょうか？
実際に運用されているサイトのソースなので、結構な量になっていますが、基本は同じです。
使い方は以下の通りで、サンプルソースをクリックするとサンプルが表示されます。
<table>
<tr>
<td>左上</td>
<td>左上</td>
</tr>
<tr>
<td>左上</td>
<td>左上</td>
</tr>
</table>
サンプルソース１
サンプルは２行２列のテーブルですが、表示されたのは文字だけで枠線が表示されていません。
本来の目的は表ではなくレイアウトなのでこれで良いのですが、今後コンテンツとして表を利用する場合、線を太くしたり色を付けたりと、何らかの装飾が必要となるため、簡単に装飾の例を紹介しておきます。
<tr> テーブルの行を定義（必要な行の数だけ定義）
<td> テーブルの項目を定義（必要な数だけ定義）
<tr>
<td>左上</td>
<td>左上</td>
</tr>
<tr>
<td>左上</td>
<td>左上</td>
</tr>
</table>
サンプルソース１
属性による装飾１
上記サンプルソースにおいて以下の装飾を施そうと思います。
・テーブル枠の太さは５、色は赤
・ 左上セルの幅は50、背景色は水色
・ 右上セルの幅は80、背景色は黄色
・ 左下セルの背景色は桃色
・ 右下セルの背景画像は斜線画像
装飾を加えたソースは以下の通りになり、サンプルソースをクリックするとサンプルが表示されます。
<table border="5" bordercolor="red">
<tr>
<td width="50" bgcolor="aqua">左上</td>
<td width="80" bgcolor="yellow">右上</td>
</tr>
<tr>
<td height="50" bgcolor="pink">左下</td>
<td height="80" background="../../images/bg_h3.gif">右下</td>
</tr>
</table>
サンプルソース２
サンプルソース１と比べて増えた部分が装飾を加えた部分です。
簡単に説明します。
border 線の太さを指定 bordercolor 線の色を指定 width セルの幅を指定 height セルの高さを指定 bgcolor 背景色を指定 background 背景画像を指定
せっかくなのでこの部分だけテーブルで作ったのですが、スタイルシートとの兼ね合いで、思い通りの装飾がうまくできませんでした。あまり参考にならないかもしれませんが、こちらもソースを確認してみて下さい。
<tr>
<td width="50" bgcolor="aqua">左上</td>
<td width="80" bgcolor="yellow">右上</td>
</tr>
<tr>
<td height="50" bgcolor="pink">左下</td>
<td height="80" background="../../images/bg_h3.gif">右下</td>
</tr>
</table>
サンプルソース２
| border | 線の太さを指定 |
| bordercolor | 線の色を指定 |
| width | セルの幅を指定 |
| height | セルの高さを指定 |
| bgcolor | 背景色を指定 |
| background | 背景画像を指定 |
属性による装飾２
ここでは、レイアウトを意識した装飾を紹介します。
サンプルソース１を基に以下の装飾を施したいと思います。
・テーブルの枠線を消す
・上部２つのセルを連結し、バナーなどのスペースとするために幅400、高さ50とする
・下部左側はメニューなどのスペースとするために幅100、高さ300とする
・下部右側は本文のスペースとするために幅300とする
装飾を加えたソースは以下の通りになり、サンプルソースをクリックするとサンプルが表示されます。
<table border="0">
<tr>
<td colspan=2 width="400" height="50">バナーなど</td>
</tr>
<tr>
<td width="100" height="300">メニューなど</td>
<td width="300">本文</td>
</tr>
</table>
サンプルソース３
見覚えのあるホームページの骨格になったと思いませんか？
表示されたサンプルページは、レイアウトを分かりやすくするため、文字を中央寄せにし、背景色を指定しています。上のサンプルソースと実際のサンプルのソースは若干変更があるので、そちらも確認してみて下さい。
<tr>
<td colspan=2 width="400" height="50">バナーなど</td>
</tr>
<tr>
<td width="100" height="300">メニューなど</td>
<td width="300">本文</td>
</tr>
</table>
サンプルソース３
属性による装飾３
ここでは、さらに応用の幅を広げてみましょう。
上のサンプルソース２に出てきたcolspanは横並びのセルを連結します。
この場合colspan=2なので、横に並んだ２つのセルを連結することになります。
ちなみに、立て方向に連結するにはrowspanを使います。
ここで、colspanとrowspanを使ったサンプルを紹介します。
以下のサンプルソースでは、どのようなテーブルになるでしょうか？
サンプルソースをクリックすると、サンプルが表示されます。
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan=2 width="200" height="100" bgcolor="aqua"></td>
<td width="100" height="200" rowspan=2 bgcolor="yellow"></td>
</tr>
<tr>
<td width="100" height="100" rowspan=2 bgcolor="pink"></td>
<td width="100" height="100" bgcolor="black"></td>
</tr>
<tr>
<td width="200" height="100" colspan=2
background="../../images/bg_h3.gif"></td>
</tr>
</table>
サンプルソース４
いかがですか？
少しでも面白いと感じていただければ幸いです。
最後に、テーブルの入れ子を紹介します。
テーブルの中にテーブルを入れて、さらに複雑なテーブルも実現できます。
当サイト、「ガソリンスタンドで働く」の棚で作ったホームページのメニュー部分ですが、テーブルをいくつも入れ子にして、枠を何重にも重ねて価格看板風のメニューになっています。
テーブルを３つ入れ子にしているため少し長めのソースになっています。
実際のソースは以下のサンプルソースをクリックして表示されるサンプルのソースを確認して下さい。
<table width="120">
<tr>
<td bgcolor="#0000ff">
<table width="120" border="3">
<tr><td height="100" width="100">看板画像</td></tr>
<tr>
<td width="120" bodercolor="white">
<table width="105" border="1" cellspacing="1">
<tr><td style="color:white; text-align:center">トップ</td></tr>
<tr><td style="color:white; text-align:center">新着情報</td></tr>
<tr><td style="color:white; text-align:center">各種料金</td></tr>
<tr><td style="color:white; text-align:center">豆知識</td></tr>
<tr><td style="color:white; text-align:center">スタッフ紹
介</td></tr>
<tr><td style="color:white; text-align:center">採用情報</td></tr>
<tr><td style="color:white; text-align:center">店舗情報</td></tr>
<tr><td style="color:white; text-align:center">リンク</td></tr>
<tr><td><IMG src="sample_table5/24h.jpg" width="101"
height="31" border="0"></td></tr>
<tr><td><IMG src="sample_table5/ss.jpg" width="101"
height="31" border="0"></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
サンプルソース５
cellspacingという属性がありますが、これはセルとセルの間隔の指定です。
サンプルソース４では間隔を０にしてあるためセルが密着した状態になっています。
今回のサンプルはメニューを想定しているため縦１列のテーブルですが、サイト全体を考えた場合、より複雑なテーブルになっていくと思います。
でも基本は何も変わりませんので、自分の納得できる範囲でテーブル作りを楽しんで下さい。
<tr>
<td colspan=2 width="200" height="100" bgcolor="aqua"></td>
<td width="100" height="200" rowspan=2 bgcolor="yellow"></td>
</tr>
<tr>
<td width="100" height="100" rowspan=2 bgcolor="pink"></td>
<td width="100" height="100" bgcolor="black"></td>
</tr>
<tr>
<td width="200" height="100" colspan=2
background="../../images/bg_h3.gif"></td>
</tr>
</table>
サンプルソース４
<tr>
<td bgcolor="#0000ff">
<table width="120" border="3">
<tr><td height="100" width="100">看板画像</td></tr>
<tr>
<td width="120" bodercolor="white">
<table width="105" border="1" cellspacing="1">
<tr><td style="color:white; text-align:center">トップ</td></tr>
<tr><td style="color:white; text-align:center">新着情報</td></tr>
<tr><td style="color:white; text-align:center">各種料金</td></tr>
<tr><td style="color:white; text-align:center">豆知識</td></tr>
<tr><td style="color:white; text-align:center">スタッフ紹
介</td></tr>
<tr><td style="color:white; text-align:center">採用情報</td></tr>
<tr><td style="color:white; text-align:center">店舗情報</td></tr>
<tr><td style="color:white; text-align:center">リンク</td></tr>
<tr><td><IMG src="sample_table5/24h.jpg" width="101"
height="31" border="0"></td></tr>
<tr><td><IMG src="sample_table5/ss.jpg" width="101"
height="31" border="0"></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
サンプルソース５
