まず下のボックス内に記述されたサンプルタグをごらんください。

これが、テーブルタグの基本形になります。
tdタグではさんだ文字だけがブラウザ表示され、テーブルのボックスは表示されません。

サンプルタグ

テーブルタグの基本

<table> <tr> <td>テーブルタグの基本</td> </tr> </table>



tableの横に半角スペースborderと入力。
すると、テーブルの箱枠がブラウザに表示されます。
このテーブルを組み立て、壁紙、画像やテキストを埋め込んでいくレイアウトをテーブルレイアウトといいます。

サンプルタグ

テーブルタグの基本

<table border> <tr> <td>テーブルタグの基本</td> </tr> </table>



tableの横に半角スペースborderと入力すると枠が現れます。
そして、その枠の太さを変更することも可能、かんたんにできる。
border="●" このように記述します。
●に大きな数字を入れるほどテーブルが大きく飛び出して見え、枠は太くなるんです。

サンプルタグ１

テーブルタグの基本

<table border="3"> <tr> <td>テーブルタグの基本</td> </tr> </table>

サンプルタグ２

テーブルタグの基本

<table border="6"> <tr> <td>テーブルタグの基本</td> </tr> </table>



枠を太くするためにはcellspacingタグをつかいます。
tableタグの横に侵入、ピクセル、またはパーセンテージで枠の幅を調整。

サンプルタグ１

テーブルタグの基本

<table cellspacing="5" border="1"> <tr> <td>テーブルタグの基本</td> </tr> </table>

サンプルタグ２

テーブルタグの基本

<table cellspacing="10" border="1"> <tr> <td>テーブルタグの基本</td> </tr> </table>



内文字と枠の間隔をいじるにはcellpaddingタグをつかいます。
tableタグの横に侵入、ピクセル、またはパーセンテージで枠の幅を調整。
表をつくったり、テーブルレイアウトする時、よくつかうタグ。
わたしがテーブルレイアウトする際、必ずつかっているタグです。

サンプルタグ１

テーブルタグの基本

<table cellpadding="5" border="1"> <tr> <td>テーブルタグの基本</td> </tr> </table>

サンプルタグ２

テーブルタグの基本

<table cellpadding="15" border="1"> <tr> <td>テーブルタグの基本</td> </tr> </table>

• まずはじめに
• テーブル基礎
• テーブルのカラー
• テーブルに画像貼り付け
• テーブルのサイズ
• テーブルの文字配置

• テーブルタグ講座
• ホームページ素材箱トップへもどる