コラム７-５-８　タグのお勉強　<<表-１>>

表についてです。
下のような枠つきのものや、枠なしのものも作成可能です。これをマスターするとページレイアウトの工夫が色々できます。
表の中にさらに表をつくる事も可能です。

例　枠あり

表作成	サンプル		いい
枠あり	テスト	ああ		うう

例　枠なし

表作成	サンプル		BB
枠なし	TEST	AA		CC

<TABLE>～</TABLE>
のタグで囲まれた部分が表になります。(このままだと枠の表示はありません。)

<TR>～<TR>　・・・行を定義します。

<TD>～<TD>　・・・列を定義します。

※～には表示したい文字などを入れます。

また、枠を表示したい場合、下記のようになります。
””　内の数字は枠の幅を指示しています。
<TABLE　border="1">～</TABLE>

例をみてみましょう。

例１

＜HTMLでは＞

→

＜表示させると＞

<TABLE border="1">

<TR><TD>１列目</TD></TR>
<TR><TD>2列目</TD></TR>

</TABLE>

1列目

2列目

　
例２

＜HTMLでは＞

→

＜表示させると＞

<TABLE border="4">

<TR>
<TD>1列目の1行目</TD>
<TD>1列目の2行目 </TD>
<TD>1列目の3行目 </TD>
</TR>
<TR>
<TD>2列目の1行目</TD>
<TD>2列目の2行目 </TD>
<TD>2列目の3行目 </TD>
</TR>

</TABLE>

1列目の1行目	1列目の2行目	1列目の3行目
2列目の1行目	2列目の2行目	2列目の3行目

例3
文字の色や大きさ、表示位置などと組み合わせて使えます。

＜HTMLでは＞

→

＜表示させると＞

<TABLE>

<TR>
<TD align="right">
<FONT size="-2">
1列目の1行目
</FONT>
</TD>
<TD>
<FONT size="+2">
1列目の2行目
</FONT>
</TD>
</TR>
<TR>
<TD>
<FONT COLOR="RED">
2列目の1行目
</FONT>
</TD>
<TD><B>
2列目の2行目
</B> </TD>
</TR>

</TABLE>

1列目の1行目	1列目の2行目
2列目の1行目	2列目の2行目

コラム７-5-7へ　　　　　コラム７-5-9へ

目次へ戻る