テーブルの基本３　テーブルに色をつける


HTMLタグのページ 　　テーブルの背景をかえる　全体の色・セルの色・テーブルに背景をつける
・テーブルの線に色をつける


テーブル全体に色をつける


テーブル全体を同じ色で塗りつぶす時は、<table bgcolor="色の指定">とする

タグ
<table height="100" width="100" border="1" bgcolor="#0000FF" >
<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> に 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>

＊　行（横一列が同じ色になります）


ブラウザ表示
　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>

*　ここではこの背景画像を使用しています


ブラウザ表示
* *
* *


*　画像の持ち出しは禁止させていただきます!!!


テーブルの線に色をつける <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>


ブラウザ表示
* *
* *


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>


ブラウザ表示
* *
* *

© Rakuten Group, Inc.
X

Create a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
    Share by: