++TOP++

-- 表の枠


表をうまく使うと、このように額縁のようになります。
ちょっと、表で遊んでみませんか?

 表の枠に色をつけたい
 「HTMLソース」を開いて、タグを書き込みば、色をつけることができます。

1 2
3 4

左の表は、「表の属性」で、「枠表示」を5ピクセル、「セル内の余白」を20ピクセルに、設定したものです。
タグは、下のようになります。

<TABLE border="5" cellpadding="20">
<TBODY><TR>
<TD>1</TD><TD>2</TD>
</TR>
<TR>
<TD>3</TD><TD>4</TD>
</TR></TBODY>
</TABLE>


1 2
3 4


この赤文字のところに、色の属性のタグ(bordercolor)を、追加します。
試しに、ピンク(#ff9999)に設定してみます。

<TABLE border="5" bordercolor="#ff9999" cellpadding="20">
(省略)

ここで、気を付けなければいけないのが、
プラウザ(IEや、ネスケ)によって、見え方が異なるという点です。
ちなみに、IE4.0では、平面なピンクの枠に見えます。


1 2
3 4

では、次に、bordercolordark”(枠の暗い部分の色)、”bordercolorlight”(枠の明るい部分の色)も、設定してみましょう。

<TABLE border="5" bordercolor="#0000ff"
bordercolordark="#ff3366" bordercolorlight="#ff9999" cellpadding="20">
(省略)

ちなみに、IE4.0では、bodercolorで、設定した色が、見えなくなってしまいます。


1 2
3 4

上の表で、「罫線の幅」を、“0”にすると(cellspacing="0")、こんな風になります。

<TABLE border="5" bordercolor="#0000ff"
bordercolordark="#ff3366" bordercolorlight="#ff9999"
cellpadding="20" cellspacing="0"
<TBODY><TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR></TBODY>


1 2
3 4
最後に、「表の属性」で、
「表の背景色」を薄いピンクに設定して、
「セルの背景色」を白に設定すると、このようになります。
わかりやすいように、「罫線の幅」を"5"にしています。
プレビュー画面で、色を確認しながら、調節してください。

<TABLE border="5" bordercolordark="#ff3366" bordercolorlight="#ff9999" cellpadding="20" bgcolor="#fff0f0" cellspacing="5">
<TBODY><TR>
<TD bgcolor="#ffffff">1</TD>
<TD bgcolor="#ffffff">2</TD>
</TR>
<TR>
<TD bgcolor="#ffffff">3</TD>
<TD bgcolor="#ffffff">4</TD>
</TR></TBODY>
</TABLE>


表の属性のhtmタグ 意  味
border 枠線
(HPビルダーでは、
「枠表示」の数値)
枠線の太さを指定します
bordercolor 枠線の色 枠線の色を指定します
bordercolorlight 枠線の明るい色(左半分) 枠線の明るい色を指定します
bordercolordark 枠線の暗い色(右半分) 枠線の暗い色を指定します
bgcolor 背景色 表の背景色を指定します
cellspacing 罫線の幅 枠線と、セルの間の幅を指定します
cellpadding セル内の余白 セルの中の余白を指定します

copyright(C)2002 A.Sakaguchi all rights reserved
Anne's Small Box