テーブルの基本３ テーブルに色をつける
HTMLタグのページ
テーブルの背景をかえる 全体の色・セルの色・テーブルに背景をつける
・テーブルの線に色をつける
・テーブルの線に色をつける
テーブル全体に色をつける
テーブル全体を同じ色で塗りつぶす時は、<table bgcolor="色の指定">とする
タグ
<table height="100" width="100" border="1" bgcolor="#0000FF"
>
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td>
</td>
</tr>
</table>
*この場合はテーブルの中を0000ff（青）に指定した
*セルの数が増えてもタグは一つで全体の色が指定できます
ブラウザの表示
セルごとに色を変える
セルごとに色を変えるにはそれぞれの セルごと（<td>～</td>）
にbgcolor="●●"タグを入れ指定する
タグ
ブラウザ表示
タグ
<table width="200" border="1">
<tr>
<tdheight="100" bgcolor="#0000FF" >１ </td>
<tdheight="100" bgcolor="#FFFF00" >２ </td>
</tr>
<tr>
<tdheight="100" bgcolor="#FF0000" > ３ </td>
<tdheight="100" bgcolor="#00FF00" > ４ </td>
</tr>
</table>
<tr>
<tdheight="100" bgcolor="#0000FF" >１ </td>
<tdheight="100" bgcolor="#FFFF00" >２ </td>
</tr>
<tr>
<tdheight="100" bgcolor="#FF0000" > ３ </td>
<tdheight="100" bgcolor="#00FF00" > ４ </td>
</tr>
</table>
ブラウザ表示
| １ | ２ |
| ３ | ４ |
行ごとに色を指定する
行ごとに色を指定する場合は 行指定のタグ<tr>
に bgcolor="●●"を指定する
タグ
＊ 行（横一列が同じ色になります）
ブラウザ表示
タグ
<table width="200" border="1">
<tr bgcolor="#FF00FF" >
<td height="100">1 </td>
<td height="100">2 </td>
</tr>
<tr bgcolor="#FFCC00" >
<td height="100">3 </td>
<td height="100">4 </td>
</tr>
</table>
<tr bgcolor="#FF00FF" >
<td height="100">1 </td>
<td height="100">2 </td>
</tr>
<tr bgcolor="#FFCC00" >
<td height="100">3 </td>
<td height="100">4 </td>
</tr>
</table>
＊ 行（横一列が同じ色になります）
ブラウザ表示
| 1 | 2 |
| 3 | 4 |
テーブルに背景を入れる
テーブル全体に背景を入れるには、 <table>タグにbackground="背景画像のURL（ファイル名）"を指定する
タグ
* ここではこの
背景画像を使用しています
ブラウザ表示
* 画像の持ち出しは禁止させていただきます!!!
タグ
<tablewidth="400" border="2" background="画像のURL"
>
<tr>
<td height="100"> </td>
<td height="100"> </td>
</tr>
<tr>
<td height="100"> </td>
<td height="100"> </td>
</tr>
</table>
<tr>
<td height="100"> </td>
<td height="100"> </td>
</tr>
<tr>
<td height="100"> </td>
<td height="100"> </td>
</tr>
</table>
* ここではこの
背景画像を使用していますブラウザ表示
| * | * |
| * | * |
* 画像の持ち出しは禁止させていただきます!!!
テーブルの線に色をつける <table bordercolor="#●●">
テーブルの枠線に色をつけるには<table>タグに bordercolor="●●"を指定します
タグ
<tablewidth="200" height="100" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
ブラウザ表示
| * | * |
| * | * |
cellspacingをつけると枠の幅が出来るので2縦線を使ったようになります
タグ
<tablewidth="200" height="100" border="1" cellspacing="4"
bordercolor="#FF0000">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
ブラウザ表示
| * | * |
| * | * |
© Rakuten Group, Inc.
