テーブルタグは単に表を作成するだけでなくブラウザーに表現したいオブジェクト
のレイアウト又背景色を利用してページの装飾などに多用されます。
これらを使用し表現のバリエーションを得る第一のメリットは画像を貼り付けるのとは
違い”テキスト”なのでファィル容量が少なく、ブラウザーへの表示速度がメチャ速い
と言う事です。
基本のタグ
下が表の外枠
|
| <TABLE>〜</TABLE> | 枠線無し |
| <TABLE BORDER="*">〜</TABLE> | 枠線有り |
下が表の中に入れるタグ
|
| <TD>〜</TD> | テーブルデーター(列) |
| <TR>〜</TR> | このタグで複数の<TD>〜</TD>
を挟むと横一列が出来る |
テーブルの位置指定
|
| <TABLE ALIGN="*">〜</TABLE> | ALIGN="*"*部分に
left,center,rightを指定する。 |
テーブルデター内の位置指定
|
| <TD ALIGN="*">〜</TD> | ALIGN="*"*部分に
left,center,rightを指定する。 |
(例)テーブル位置指定−左
|
| <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" ALIGN="left"> |
| <TR><TD>テーブル全体が左に</TD><TD>テーブル全体が左に</TD></TR> |
| <TR><TD>テーブル全体が左に</TD><TD>テーブル全体が左に</TD></TR> |
| </TABLE> |
|
| テーブル全体が左に | テーブル全体が左に |
| テーブル全体が左に | テーブル全体が左に |
(例)テーブルデター内の位置指定
|
| <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" ALIGN="center" WIDTH="400">
| | <TR><TD ALIGN="left">
データーが左に</TD><TD ALIGN="right">
データーが右に</TD></TR> |
| <TR><TD ALIGN="center">データーが中央に</TD><TD ALIGN="center">データーが中央に</TD></TR> |
| </TABLE>
|
|
| データーが左に | データーが右に |
| データーが中央に | データーが中央に |
複数行にまたがる列枠を作る
|
| <TD ROWSPAN="*">〜</TD> | "*"に行数分の数を入れる |
サンプル
|
| <TABLE BORDER="1" ALIGN="center"> |
| <TR><TD ROWSPAN="4">サンプル</TD><TD>よ</TD></TR> |
| <TR><TD>う</TD></TR> |
| <TR><TD>こ</TD></TR> |
| <TR><TD>そ</TD></TR> |
| </TABLE> |
|
複数列にまたがる行枠を作る
|
| <TABLE BORDER="1" ALIGN="center"> |
| <TR><TD COLSPAN="4">サンプル</TD></TR> |
| <TR> |
| <TD>よ</TD><TD>う</TD><TD>こ</TD><TD>そ</TD> |
| </TR> |
| </TABLE> |
|
|
その他のオプションタグ
| CELLSPACING="*" | 枠の太さ |
| CELLPADDING="*" | 枠線と表内データーとの位置 |
|
以上が大まかな基本タグでこれを利用しレイアウト
する。この方法だけでも結構そこそこのページが出来る |
簡単な使用例
+1+
簡単な使用例
+2+
|