- テーブルタグについて -

ここでは題名通り、テーブルタグについて説明します。 このタグはWebサイトを作成する上で、使用頻度がかなり高いタグだと思います。


■<TABLE>タグについて
では説明を開始しましょうか。まずは基本なテーブルタグの形、それと属性等を説明します。

・記述タグ
<TABLE><TR><TD>表示部分</TD></TR></TABLE>

使用可能属性 :
width - 横幅の指定
height - 縦幅の指定
border - テーブルの枠の表示設定
bordercolor - 枠の色の指定
bgcolor - 背景色の指定
rowspan - 縦方向へのセルの結合指定(<TD>でのみ使用)
colspan - 横方向へのセルの結合指定(<TD>でのみ使用)



と言う感じです。基本的な形の説明だとこの様な感じになります。 上記属性等を使用したテーブルの例は、以下から説明して行こうと思います。


■テーブルのサイズ、枠表示や背景色について
それでは今度はテーブルの枠や背景色について説明しましょう。記述例や表示例等は以下から。

・記述例&表示例
記述例.1(枠表示) :
<TABLE border="1">
<TR><TD>
枠表示(border="1")
</TD></TR>
</TABLE>

記述例.2(枠表示) :
<TABLE border="3">
<TR><TD>
枠表示(border="3")
</TD></TR>
</TABLE>

記述例.3(枠の色変更) :
<TABLE border="1"bordercolor="#ff0000">
<TR><TD>
枠の色変更(border="1"bordercolor="#ff0000")
</TD></TR>
</TABLE>

記述例.4(背景色変更) :
<TABLE bgcolor="#0000ff">
<TR><TD>
背景色変更(bgcolor="#0000ff")
</TD></TR>
</TABLE>

記述例.5(サイズと背景色変更) :
<TABLE width="400px"height="200px"bgcolor="#ff33ff">
<TR><TD>
サイズと背景色変更(width="400px"height="200px"bgcolor="#ff33ff")
</TD></TR>
</TABLE>

表示例.1(枠表示) :
枠表示(border="1")

表示例.2(枠表示) :
枠表示(border="3")

表示例.3(枠の色変更) :
枠の色変更(border="1"bordercolor="#ff0000")

表示例.4(背景色変更) :
背景色変更(bgcolor="#0000ff")

表示例.5(サイズと背景色変更) :
サイズと背景色変更
(width="400px"height="200px"bgcolor="#ff33ff")


という感じになります。と言ってもこれは基本的な部分で、まだ階層分けすらしてない状態です。
テーブルタグの本領は階層分けをしての表作成です。と言うワケで、それについて以下で説明します。


■テーブル階層分けをする
表を作成する際には、縦方向と横方向に幾つかの階層分けをすると思います。 ここではその方法を説明して行きます。

・記述例&表示例
記述例.1 :
<TABLE border="1">
<TR><TD width="100px">
表示部分.A
</TD><TD width="100px">
表示部分.B
</TD></TR>
<TR><TD width="100px">
表示部分.C
</TD><TD width="100px">
表示部分.D
</TD></TR>
</TABLE>

記述例.2 :
<TABLE border="1">
<TR><TD width="100px"rowspan="2">
縦2層使用
</TD><TD width="100px">
表示部分.1
</TD></TR>
<TR><TD width="100px">
表示部分.2
</TD></TR>
<TR><TD width="100px">
表示部分.3
</TD><TD width="100px">
表示部分.4
</TD></TR>
<TR><TD colspan="2">
横2層使用
</TD></TR>
</TABLE>

表示例.1 :
表示部分.A表示部分.B
表示部分.C表示部分.D

表示例.2 :
縦2層使用(rowspan="2") 表示部分.1
表示部分.2
表示部分.3 表示部分.4
横2層使用(colspan="2")


階層分けについてはこんな感じになります。一気に書いたので解り難いかも知れませんが、その場合は質問して下さい。 またはご自分で調べてみるのも良いかも知れません。
何せ、ここは俺の知識で書いてるので間違いが有るかも知れませんので(オイ)

BACK< HTML講座目次 >NEXT