＜TABLE＞タグの3回目です。
前回の説明で<TABLE>タグの属性をほぼ説明しましたが、今回はその第２回目です。（作表としては３回目ですが属性としては２回目です）
今回取り上げるのは次の属性です。
①ＢＧＣＯＬＯＲ
②ＢＡＣＫＧＲＯＵＮＤ
ＢＧＣＯＬＯＲ属性とＢＡＣＫＧＲＯＵＮＤ属性はともに表の背景を設定するための属性です。
ＢＧＣＯＬＯＲの設定の仕方は＜ＦＯＮＴ＞タグのCOLOR属性と同様、色名で設定する方法と数値で設定する方法があります。
例 (色名での指定） <TABLE BGCOLOR="RED"
BORDER="1"><TR><TH>時代</TH><TH>覇権</TH><TH>居城</TH></TR><TR><TD>安土桃山</TD><TD>織田信長</TD><TD>安土城</TD></TR><TR><TD>安土桃山</TD><TD>豊臣秀吉</TD><TD>大阪城</TD></TR><TR><TD>江戸</TD><TD>徳川家康</TD><TD>駿府城</TD></TR></TABLE>
| 時代 | 覇権 | 居城 |
|---|
| 安土桃山 | 織田信長 | 安土城 | | 安土桃山 | 豊臣秀吉 | 大阪城 | | 江戸 | 徳川家康 | 駿府城 |
例 (数値での指定） <TABLE BGCOLOR="#8888FF"
BORDER="1"><TR><TH>時代</TH><TH>覇権</TH><TH>居城</TH></TR><TR><TD>安土桃山</TD><TD>織田信長</TD><TD>安土城</TD></TR><TR><TD>安土桃山</TD><TD>豊臣秀吉</TD><TD>大阪城</TD></TR><TR><TD>江戸</TD><TD>徳川家康</TD><TD>駿府城</TD></TR></TABLE>
| 時代 | 覇権 | 居城 |
|---|
| 安土桃山 | 織田信長 | 安土城 |
| 安土桃山 | 豊臣秀吉 | 大阪城 |
| 江戸 | 徳川家康 | 駿府城 |
BACKGROUNDの設定も＜BODY＞タグのBACKGROUND属性と同様に設定します。対象がページ全体から表内に限定される点を除いては、背景にタイル状の画像を敷き詰めることでは同じです。
例 <TABLE
BＡＣＫＧＲＯＵＮＤ="./back002.jpg"
BORDER="1"><TR><TH>時代</TH><TH>覇権</TH><TH>居城</TH></TR><TR><TD>安土桃山</TD><TD>織田信長</TD><TD>安土城</TD></TR><TR><TD>安土桃山</TD><TD>豊臣秀吉</TD><TD>大阪城</TD></TR><TR><TD>江戸</TD><TD>徳川家康</TD><TD>駿府</TD></TR></TABLE>
|
時代 | 覇権 | 居城 |
|---|
| 安土桃山 | 織田信長 | 安土城 |
| 安土桃山 | 豊臣秀吉 | 大阪城 |
| 江戸 | 徳川家康 | 駿府城 |
いずれ＜TR＞などの項でも説明しますが、＜TR＞＜TH＞＜TD＞でもBGCOLOR、BACKGROUNDをセルごとに設定することができます。表内のタグで使う同じ属性の場合、より内側の設定が優先されます。
つまり、＜TABLE＞、＜TR＞、＜TH＞、＜TD＞のそれぞれでBGCOLORやBACKGROUNDが指定した場合、下位のものから（＜TH＞・＜TD＞→＜TR＞→＜TABLE＞の順に）優先されます。
今までの表の例では、表内のセルには文字しか入っていませんでしたが、文字のかわりに一般的な画像を置くこともできます。これにより、背景画像と一般画像を組み合わせた２階層のレイヤー（層）を用いてデザインすることができます。もちろん背景色と一般画像の組み合わせも可能です。
次の例では背景画像の上にリンクボタン（画像）を配置しています。
例
<TABLE BORDER="1" BACKGROUND="./back002.jpg">
<TR><TH>時代</ＴH><TH>覇権</TH><TH>居城</ＴH><TH>リンク</TH></TR>
<TR><TD>安土桃山</ＴD><TD>織田信長</TD><TD>安土城</ＴD><TD><IMG
BORDER="0" SRC="./pic023_1.gif" width="42"
height="16"></TD></TR>
<TR><TD>安土桃山</ＴD><TD>豊臣秀吉</TD><TD>大阪城</ＴD><TD><IMG
BORDER="0" SRC="./pic023_2.gif" width="42"
height="16"></TD></TR>
<TR><TD>江戸</ＴD><TD>徳川家康</TD><TD>駿府城</ＴD><TD><IMG
BORDER="0" SRC="./pic023_3.gif" width="42"
height="16"></TD></TR>
<TABLE>
|
時代 | 覇権 | 居城 | リンク |
|---|
| 安土桃山 | 織田信長 | 安土城 |  |
| 安土桃山 | 豊臣秀吉 | 大阪城 |
 |
| 江戸 | 徳川家康 | 駿府城 |  |
背景画像、株式会社インプレス刊「ホームページ用素材集」よりCopyright
SIFCA
|
構 文
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TABLE
BＡＣＫＧＲＯＵＮＤ="./back002.jpg"
BORDER="1">
<TR><TH>時代</TH><TH>覇権</TH><TH>居城</TH></TR>
<TR><TD>安土桃山</TD><TD>織田信長</TD><TD>安土城</TD></TR>
<TR><TD>安土桃山</TD><TD>豊臣秀吉</TD><TD>大阪城</TD></TR>
<TR><TD>江戸</TD><TD>徳川家康</TD><TD>駿府城</TD></TR>
</TABLE>
</BODY>
</HTML> |
使用例 <HTML>
<HEAD>
<TITLE>戦国時代の覇権</TITLE>
</HEAD>
<BODY>
<TABLE
BＡＣＫＧＲＯＵＮＤ="./back003.jpg"
BORDER="1">
<TR><TH>時代</TH><TH>覇権</TH><TH>居城</TH></TR>
<TR><TD>安土桃山</TD><TD>織田信長</TD><TD>安土城</TD></TR>
<TR><TD>安土桃山</TD><TD>豊臣秀吉</TD><TD>大阪城</TD></TR>
<TR><TD>江戸</TD><TD>徳川家康</TD><TD>駿府城</TD></TR>
</TABLE>
</BODY>
</HTML>
|
|
