ホームページを作成するうえでどうしても困難なのがレイアウトの構成です。

ホームページと言う物が誕生し始めた頃は、テキストベースのホームページが多く、複雑なページ構成が出来ませんでした。しかし、複雑なページをレイアウトする為に、テーブルタグを使って、ページ構成をする事が多くなりました。

近年HTMLタグに関する各種バージョンの向上に伴い、レイアウトはテーブルタグを使うことから、スタイルシートを使った構成が推奨されております。テーブルタグを使ったレイアウトは非推奨ですが、テーブルタグを理解すれば、とても簡単にカスタマイズができます。

はじめはテーブルタグを使ったレイアウトにチャレンジし、だんだん慣れて来たと感じられたら、是非スタイルシートによるレイアウトにチャレンジ下さい。

スタイルシート構成にする事によって、ブラウザの種類やバージョンに捕らわれない、各ブラウザにあったページ表現が可能になります。

 

テーブルタグを使ったレイアウト

ホームページのレイアウト表現で、とても大切な表現方法！！　テーブルタグをご存知でしょうか？例えばテーブルタグは以下のように使われるのが一般的です。

ブラウザ上では 点数 競技 １０点 馬飛び ２０点 球投げ

実際のタグ <table border="1"> <tr> <td>点数</td> <td>競技</td> </tr> <tr> <td>１０点</td> <td>馬飛び</td> </tr> <tr> <td>２０点</td> <td>球投げ</td> </tr> </table>

しかし、これでは本当の表を作成するにすぎません。テーブルタグの魅力はこれだけでは無いのです。枠の太さを０にする事によって、掲示板への投稿フォームは出来ております。

名前
Eメール
題名
内容
URL
削除キー	項目の保存

実際のタグ

<table align=center>
<tr>
<td valign="bottom" colspan="3">
</td>
</tr>
<tr>
<td>名前</td>
<td><input type="text" name="name" size="60"></td>
</tr>
<tr>
<td>Eメール</td>
<td><input type="text" name="mail" size="60"></td>
</tr>
<tr>
<td>題名</td>
<td><input type="text" name="sub" size="60"></td>
</tr>
<tr>
<td>内容</td>
<td><textarea cols="60" rows=4 name="mes"></textarea>
<INPUT TYPE=submit VALUE="書き込む" onClick="mmsg()">
</td>
</tr>
<tr>
<td>URL</td>
<td><input type="text" size="60" name="url"></td>
</tr>
<td>削除キー</td>
<td>
<input type="password" name="key" size="8">
項目の保存<INPUT type="checkbox" name="ccheck" checked>
</td>
</tr>
</table>

　

テーブルタグのルールとしては

最初と最後には <table>　タグにて囲む

横列をまとめて

<tr></tr>　タグで囲む

各枠ごとに　<td> </td>　にて囲っていると言う点です。

例１ 左上 右上 左下 右下 <table border="1"> <tr> <td>左上</td> <td>右上</td> </tr> <tr> <td>左下</td> <td>右下</td> </tr> </table>

例２ 左上 中上 右上 左下 中下 右下 <table border="1"> <tr> <td>左上</td> <td>中上</td> <td>右上</td> </tr> <tr> <td>左下</td> <td>中下</td> <td>右下</td> </tr> </table>