HOME > HTML TAG > テーブル

テーブル　タグ


テーブルタグは、下記のような表を作るタグです。

　
　　　
　　　


使用するタグは、<TABLE>　<TR>　<TD>　で、下記のように構成されています。

　　<TABLE>
　　　　<TR>
　　　　　<TD>　</TD>　　　
　　　　</TR>
　　</TABLE>


<TABLE>　表全体（テーブル領域）を指定するタグです。
<TR>　それぞれの行を指定するタグです。水色の部分は行。
<TD>　それぞれのデータを指定するタグです。ピンク色の部分はデータ部。

一番上の列
二段目左二段目の右
一番下のピンク下の中下の右


例にまで上記のテーブルタグのは、

<TABLE BORDER="3" CELLSPACING="5" CELLPADDING="10" WIDTH="400" BORDERCOLOR="#808080">
<TR><TD COLSPAN="3">一番上の列</TD></TR>
<TR BGCOLOR="#D0E8FF"><TD COLSPAN="2">二段目の左</TD><TD>二段目の右</TD></TR>
<TR><TD BGCOLOR="#FFD2E9">一番下のピンク</TD><TD>下の中</TD><TD>下の右</TD></TR>
</TABLE>
このようになります。




　<TABLE>内に入るタグ。

<TABLE BORDER="*">　外枠の線の太さ。*に枠の太さを指定。数字を記入。

<TABLE CELLSPACING="*">　表の線の太さを指定。*に枠の太さを指定。数字を記入。

<TABLE CELLPADDING="*">　データの中の線と文字（画像）の間隔を指定。*に枠の太さを指定。数字を記入。

<TABLE BORDERCOLOR="*">　枠線の色を指定。*にカラーコードを記入。

<TABLE BORDERCOLORLIGHT="*">　枠線の明枠線部の色を指定。*にカラーコードを記入。

<TABLE BORDERCOLORDARK="*">　枠線の暗枠線部の色を指定。*にカラーコードを記入。




　<TABLE>と<TR>と<TD>内に入るタグ。

<TABLE BGCOLOR="*">　　<TR BGCOLOR="*">　　<TD BGCOLOR="*">

背景色を指定。*にカラーコードを記入。



　<TABLE>と<TD>内に入るタグ。

<TABLE WIDTH="*">　表の横幅サイズを指定。*にピクセル数を指定。パーセント数でも可。
<TD WIDTH="*">　表の横幅サイズを指定。*にピクセル数を指定。

<TABLE HEIGHT="*">　表の縦幅サイズを指定。*にピクセル数を指定。パーセント数でも可。
<TD HEIGHT="*">　表の縦幅サイズを指定。*にピクセル数を指定。



　<TR>と<TD>内に入るタグ。

<TR ALIGN="*">　<TD ALIGN="*">　　枠内の文字（画像）の横の位置を指定する。*に位置を指定。
左側に表示 "left"　中央に表示 "center"　右側に表示 "right"　※指定しないと左側に表示。

<TR VALIGN="*">　<TD VALIGN="*">　　枠内の文字（画像）の縦の位置を指定する。*に位置を指定。
上側に表示 " top"　中央に表示 "middle"　下側に表示 "bottom"　※指定しないと中央に表示。


（表示例）

通常指定なし指定なし
列（TR）で
上、右側指定。		上、右側上、右側
列（TR）で下、左側下、左側下、左側
データ（TD）で
上、左を指定		右、下指定なし



　<TD>内に入るタグ。

<TD COLSPAN="*">　　横に枠を結合させる数を指定。*に結合させる数を指定。

<TD ROWSPAN="*">　　縦に枠を結合させる数を指定。*に結合させる数を指定。


（通常例）

　　　
　　　
　　　
　　　
　　　
　　　


（結合例）

　　　
横に３結合
横に２結合　
　　　
縦に２結合　　
　　



枠数以上の数字を指定されても、最大枠数以上は結合できません。
横に３つしか枠がない場合、タグで指定する数字を４や５などと指定しても最大の３つ結合になります。