ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - 表をつくる(3)複数の枠の表の飾り方

表をつくる(3)複数の枠の表の飾り方

まずはおさらいです。
縦と横に増やす 縦と横に増やす
縦と横に増やす 縦と横に増やす

<table border>
<tr>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
</tr>
<tr>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
</tr>
</table>


思い出したところで早速、複数の枠の表の飾り方を説明していきたいと思います。

この枠のみ色付け ここは何もなし
この行に色付け この行に色付け

<table border>
<tr>
<td bgcolor="#ccff33">この枠のみ色付け</td>
<td>ここは何もなし</td>
</tr>
<tr bgcolor="#F0E68C">
<td>この行に色付け</td>
<td>この行に色付け</td>
</tr>
</table>

tdの後ろにbgcolor="#ccff33"を入れると、その枠の中(セルといいます)だけ色が付きます。
trの後ろにbgcolor="#F0E68C"を入れると、その横1列のセル全部に色が付きます。

この枠のみ色付け 外枠と同じ色になる
この行に色付け この行に色付け

<table border bgcolor="#ffaaaa">
<tr>
<td bgcolor="#ccff33">この枠のみ色付け</td>
<td>外枠と同じ色になる</td>
</tr>
<tr bgcolor="#F0E68C">
<td>この行に色付け</td>
<td>この行に色付け</td>
</tr>
</table>

さらにborderの後ろにbgcolor="#ffaaaa"を入れると外枠(テーブルといいます)と色を指定していなかった右上のセルに色が付きます。
簡単にまとめると、<table>に色を指定すると全体に色が付き、<td>に色を指定するとそのセルのみに色が付き、<tr>に色を指定するとその横1列に色が付く。<tr>と、<td>は<table>の色に優先してつけられる。
これさえ理解していれば、前回説明した色々な飾り方と組み合わせれば、ほぼ何でもできると思います。

少しどんな事ができるのか紹介したいと思います。

このセルのみ色付け このセルのみ色付け
このセルのみ色付け このセルのみ色付け

<table bgcolor="#00CED1" cellspacing="0">
<tr>
<td bgcolor="#FF00FF">このセルのみ色付け</td>
<td bgcolor="#BA55D3">このセルのみ色付け</td>
</tr>
<tr>
<td bgcolor="#BF773F">このセルのみ色付け</td>
<td bgcolor="#FA8072">このセルのみ色付け</td>
</tr>
</table>

borderを消して、代わりにcellspacing=0を入れるとテーブルが見えなくなり、セルだけが並んでいるように見えます。

このセルのみ色付け このセルのみ色付け
このセルのみ色付け このセルのみ色付け

<table cellspacing="8">
<tr>
<td bgcolor="#B0E0E6">このセルのみ色付け</td>
<td bgcolor="#99ffcc">このセルのみ色付け</td>
</tr>
<tr>
<td bgcolor="#cccccc">このセルのみ色付け</td>
<td bgcolor="#ffcccc">このセルのみ色付け</td>
</tr>
</table>

さらにbgcolorを削除してテーブルの色を消して、cellspacing=8で透明のテーブルを太くするとセルが個別に並んでいるように見えます。

この行に色付け この行に色付け
このセルのみ色付け このセルのみ色付け

<table cellspacing="0" bordercolorlight="#33ff99" 
bordercolordark="#009933">
<tr bgcolor="#99ff66">
<td>この行に色付け</td>
<td>この行に色付け</td>
</tr>
<tr>
<td bgcolor="#ccff99">このセルのみ色付け</td>
<td bgcolor="#ccff00">このセルのみ色付け</td>
</tr>
</table>

前回紹介したテーブルを立体的にして、bordercolorlight・bordercolordarkを入れてcellspacing=0にしてテーブルの幅をなくしました。

この行に色付け この行に色付け
このセルのみ色付け このセルのみ色付け

<table border="5" bordercolor="#6600ff" 
bgcolor="#cc99ff" cellspacing="5">
<tr bgcolor="#99ff66">
<td>この行に色付け</td>
<td>この行に色付け</td>
</tr>
<tr>
<td bgcolor="#ffcc66">このセルのみ色付け</td>
<td bgcolor="#ffff66">このセルのみ色付け</td>
</tr>
</table>

bordercolorで二重線にしてborder=5で二重線の外側だけ太くして、cellspacing=5で二重線の間の間隔を広げました。

次回は「表の大きさを変える」を紹介したいと思います。    <つづく>


関連ページ)
表をつくる
表をつくる(1)基本
表をつくる(2)表の飾り方
├>表をつくる(3)複数の枠の表の飾り方
表をつくる(4)表の大きさを変える
表をつくる(5)枠線を変える
表をつくる(6)タグのまとめ
表を応用して色々つくろう


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/84-0b130059   

Template Designed by DW99