表の背景色・背景画像・枠の色 |
|
表の背景色を指定する |
<table bgColor=""><tr bgColor=""><td bgColor=""> |
|
<table>タグ、<tr>タグ、<td>タグ、<th>タグに bgColor="" を追加すると、表の背景色を指定できます。 |
|
■表全体の背景色を指定する場合
<table bgColor="#d0e0ff"> |
■行単位で背景色を指定する場合
<tr bgColor="#d0e0ff"> |
■セルに背景色を指定する場合
<td bgColor="#d0e0ff"> |
■見出しのセルに背景色を指定する場合
<th bgColor="#d0e0ff"> |
bgColor="" |
背景色をカラーコードやカラーネームで指定 |
|
※ 色の指定は、ハッシュ "#" で始まる6桁のコードか、 red や green 、 white といったカラーネームで行います。詳細は、「カラーネーム」のページをご覧下さい。 ![カラーネームのページへ](../acc/LinkUtil.gif) |
![](../acc/m401.gif) この属性は、HTML4.01では非推奨とされています。詳細は、「非推奨タグと非推奨属性」のページをご覧下さい。 ![非推奨タグのページへ](../acc/LinkUtil.gif) |
![](../acc/memo.gif) この指定内容は、スタイルシートで代替えできます。 |
|
★ 使用例とブラウザでの表示 |
|
使 用 例 |
|
ブラウザの表示 |
| |
☆表全体の背景色を水色に指定
<table border=1 bgColor=skyblue>
<tr><td>北海道:札幌市</td>
<td>青森県:青森市</td></tr>
<tr><td>岩手県:盛岡市</td>
<td>宮城県:仙台市</td></tr>
</table> |
北海道:札幌市 | 青森県:青森市 |
岩手県:盛岡市 | 宮城県:仙台市 | |
☆2行目の背景色を黄色に指定
<table border=1>
<tr><td>北海道:札幌市</td>
<td>青森県:青森市</td></tr>
<tr bgColor=yellow>
<td>岩手県:盛岡市</td>
<td>宮城県:仙台市</td></tr>
</table> |
北海道:札幌市 |
青森県:青森市 | 岩手県:盛岡市 |
宮城県:仙台市 |
|
☆左側の列を金色に指定
<table border=1>
<tr><td bgColor=gold>北海道:札幌市</td>
<td>岩手県:盛岡市</td></tr>
<tr><td bgColor=gold>青森県:青森市</td>
<td>宮城県:仙台市</td></tr>
</table> |
北海道:札幌市 |
岩手県:盛岡市 | 青森県:青森市 |
宮城県:仙台市 |
|
☆重複して指定した場合
<table border=1 bgColor=lightgreen>
<tr bgColor=yellow>
<td>北海道:札幌市</td>
<td bgColor=silver>
青森県:青森市</td></tr>
<tr><td>岩手県:盛岡市</td>
<td>宮城県:仙台市</td></tr>
</table> |
北海道:札幌市 | 青森県:青森市 |
岩手県:盛岡市 | 宮城県:仙台市 |
※ <table>タグよりも<tr>タグの指定が優先し、 更に<td>タグの指定が優先します。 |
|
|
☆ bgColor属性は、HTML4.01では非推奨とされています。 |
|
|
|
関連するページ |
CSS スタイルシート :表の背景色を指定する |
Utilety Page (参考) :「非推奨タグと非推奨属性」へ |
|
表の背景に画像を使用する |
<table backGround=""><tr backGround=""><td backGround=""> |
|
<table>タグ、<tr>タグ、<td>タグ、<th>タグに backGround="" を追加すると、表の背景に画像を使用できます。 |
|
■表全体の背景画像を指定する場合
<table backGround="back.gif"> |
■行単位で背景画像を指定する場合
<tr backGround="back.gif">
![](../acc/mExp.gif) Internet Exp.は、行単位の指定に未対応。 |
■セルに背景画像を指定する場合
<td backGround="back.gif"> |
■見出しのセルに背景画像を指定する場合
<th backGround="back.gif"> |
backGround="" |
表示する画像のファイル名を指定 |
|
※ 画像ファイルの指定については、「パス(URL)の指定方法」のページを参考にして下さい。 ![パスの指定方法](../acc/LinkUtil.gif) |
![](../acc/memo.gif) backGround属性は、HTML 4.01では定義されていません。この指定内容は、スタイルシートで代替えできます。 |
|
★ 使用例とブラウザでの表示 |
|
使 用 例 |
|
ブラウザの表示 |
| |
☆表全体に背景画像を指定
<table border=1 height=100 backGround="../acc/wall.png">
<tr><td>北海道:札幌市</td>
<td>青森県:青森市</td></tr>
<tr><td>岩手県:盛岡市</td>
<td>宮城県:仙台市</td></tr>
</table> |
北海道:札幌市 | 青森県:青森市 |
岩手県:盛岡市 | 宮城県:仙台市 | |
☆2行目に背景画像を指定
<table border=1 height=100>
<tr><td>北海道:札幌市</td>
<td>青森県:青森市</td></tr>
<tr backGround="../acc/wall.png">
<td>岩手県:盛岡市</td>
<td>宮城県:仙台市</td></tr>
</table> |
北海道:札幌市 |
青森県:青森市 |
岩手県:盛岡市 | 宮城県:仙台市 |
Internet Exp.は行単位の指定に 未対応。 |
☆左の列に背景画像を指定
<table border=1 height=100>
<tr><td backGround="../acc/wall.png">
北海道:札幌市</td>
<td>岩手県:盛岡市</td></tr>
<tr><td backGround="../acc/wall.png">
青森県:青森市</td>
<td>宮城県:仙台市</td></tr>
</table> |
北海道:札幌市 | 岩手県:盛岡市 |
青森県:青森市 |
宮城県:仙台市 |
|
|
※ 重複して指定した場合は、<table>タグ
よりも、<tr>タグの指定が優先し、更に
<td>タグの指定が優先する。 |
|
|
|
関連するページ |
CSS スタイルシート :表の背景に画像を使う |
Utilety Page (参考) :「パス(URL)の指定方法」へ |
|
境界線の色を指定する |
<table border="" borderColor=""> |
|
<table>タグに borderColor="" を追加すると、表の境界線の色を指定できます。 |
※ 境界線を表示させるには、<table>タグに border属性を指定する必要があります。 |
|
<table border="5" borderColor="blue"> |
borderColor="" |
背景色をカラーコードやカラーネームで指定 |
|
※ 色の指定は、ハッシュ "#" で始まる6桁のコードか、 red や green 、 white といったカラーネームで行います。詳細は、「カラーネーム」のページをご覧下さい。 ![カラーネームのページへ](../acc/LinkUtil.gif) |
|
![](../acc/memo.gif) この指定内容は、スタイルシートで代替えできます。 |
![](../acc/mDK.gif) ブラウザにより、色の付き方は多少異なります。また、この属性に Opera は対応していません。
「色の指定」を安定させる場合は、スタイルシートで指定して下さい。 |
|
★ 使用例とブラウザでの表示 |
|
使 用 例 |
|
ブラウザの表示 |
| |
<table border=4 borderColor="blue">
<tr><td>北海道:札幌市</td>
<td>青森県:青森市</td></tr>
</table> |
|
|
☆ この属性に Opera は対応していません。 |
|
|
|
関連するページ |
HTML タグページ :表の境界線を指定する |
CSS スタイルシート :表の境界線を指定する |
Utilety Page (参考) :「カラーネーム と カラーコード」へ |
|
境界線の色を2色で指定する |
<table border="" borderColorLight="" borderColorDark=""> |
|
<table>タグに borderColorLight="" と borderColorDark を追加すると、表の境界線の色を「2色」で指定できます。 |
※ 境界線を表示させるには、<table>タグに border属性を指定する必要があります。 |
|
<table border="5" borderColorLight="LightGreen" borderColorDark="DarkGreen"> |
borderColorLight="" |
境界線の明るい部分の色を指定 |
borderColorDark="" |
境界線の暗い部分の色を指定 |
|
※ 色の指定は、ハッシュ "#" で始まる6桁のコードか、 red や green 、 white といったカラーネームで行います。詳細は、「カラーネーム」のページをご覧下さい。 ![カラーネームのページへ](../acc/LinkUtil.gif) |
|
![](../acc/mExp.gif) Internet Exp.の場合、 borderColor属性の指定では平面的な境界線になってしまいますが、上記の属性で明るい部分と暗い部分を2色で表現することにより、表の境界線を立体的に見せることが可能になります。 |
|
|
★ 使用例とブラウザでの表示 |
|
使 用 例 |
|
ブラウザの表示 |
| |
<table border=4 borderColorLight=LightGreen
borderColorDark=DarkGreen>
<tr><td>北海道:札幌市</td>
<td>青森県:青森市</td></tr>
</table> |
|
|
☆ borderColorLight(Dark)属性は、Internet Exp. の独自拡張機能です。 Firefox や Opera では、対応していません。 |
|
|
|
関連するページ |
Utilety Page (参考) :「カラーネーム と カラーコード」へ |
|