簡単テーブル６
テーブルのつくりかた ６
ｩ テーブルの枠の色を変える ｩ
枠に色をつけるときは『bordercolor』を使います。
※この属性は『table』はもちろん、『tr』『td』にも設定できます。
【table に色を設定】
| ★ | ☆ |
| ◇ | ◆ |
<table border="1" bordercolor="66CCFF"><tr><td>★</td><td>☆</td></tr><tr><td>◇</td><td>◆</td></tr></table>
【tr に色を設定】
| ★ | ☆ |
| ◇ | ◆ |
<table border="1" bordercolor="66CCFF"><tr bordercolor="5555FF"><td>★</td><td>☆</td></tr><tr><td>◇</td><td>◆</td></tr></table>
【td に色を設定】
| ★ | ☆ |
| ◇ | ◆ |
<table border="1" bordercolor="66CCFF"><tr bordercolor="5555FF"><td>★</td><td>☆</td></tr><tr><td bordercolor="FFFF66">◇</td><td></td></tr></table>
好きな部分に色をつけていくことができます。
応用で枠の幅を変える属性『cellspacing』を使って、
属性値を「0」にしてみると。。。。
【table に色を設定】
| ★ | ☆ |
| ◇ | ◆ |
<table border="1" bordercolor="66CCFF" cellspacing="0"><tr><td></td><td>☆</td></tr><tr><td>◇</td><td>◆</td></tr></table>
枠を塗りつぶすこともできちゃいます
また、『bordercolordark』『bordercolorlight』を使うと
暗い部分・明るい部分にわけて色付けができます。
【table にbordercolordark を設定】
| ★ | ☆ |
| ◇ | ◆ |
<table border="3" bordercolordark="66CCFF"><tr><td>★</td><td>☆</td></tr><tr><td>◇</td><td>◆</td></tr></table>
【bordercolorlight を設定】
| ★ | ☆ |
| ◇ | ◆ |
<table border="3" bordercolordark="66CCFF" bordercolorlight="#5555FF"><tr><td>★</td><td>☆</td></tr><tr><td></td><td>◆</td></tr></table>
『bordercolordark』だけを設定すると、けっこうカッコイイ
© Rakuten Group, Inc.
