Ｑ＆Ａコーナー** 表に色をつける * *

++TOP++

	--　表の枠

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

Ｑ　表の枠に色をつけたい

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

1	2
3	4

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

1	2
3	4

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

<TABLE border="5" bordercolor="#ff9999" cellpadding="20">
（省略）

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

1	2
3	4

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

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

ちなみに、ＩＥ4.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"にしています。
プレビュー画面で、色を確認しながら、調節してください。

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




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