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

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

表をつくる(2)表の飾り方

前回で表は作れるようになったと思います。基本の形から増やしたい方向に増やしたいだけ、横なら<td>~</td>、縦なら<tr>~</tr>と<td>~</td>のセットを増やすだけです。
では早速、飾り方を説明していきたいと思います。

基本のテーブルタグです

<table border>
<tr>
<td>基本のテーブルタグです</td>
</tr>
</table>

これが基本の形でしたね。

外枠が立体的になりました

<table border="5">
<tr>
<td>外枠が立体的になりました</td>
</tr>
</table>

borderの後にborder=5というように数字を入れると外枠の線が立体的かつ太くなります。数字は大きければ大きい程、太くなります。

外枠が太くなりました

<table border cellspacing="5">
<tr>
<td>外枠が太くなりました</td>
</tr>
</table>

borderの後にcellspacing="5"を入れるとただ単に外枠が太くなります。数字は大きければ大きい程、太くなります。

枠全体に色がつきました

<table border bgcolor="#AFEEEE">
<tr>
<td>枠全体に色がつきました</td>
</tr>
</table>

borderの後にbgcolor="#AFEEEE"を入れると枠全体に色がつきます。"#AFEEEE"が色の種類を表しています。色はカラーコードパレットのような所で、お好きな色のコードを見つけてきて下さい。

枠の中だけ色がつきました

<table border>
<tr>
<td bgcolor="#98FB98">枠の中だけ色がつきました</td>
</tr>
</table>

今度はtdの後にbgcolor="#98FB98"を入れると枠の中だけに色をつける事ができます。

それぞれに色がつきました

<table border bgcolor="#008080">
<tr>
<td bgcolor="#FFE4E1">それぞれに色がつきました</td>
</tr>
</table>

borderの後のbgcolor="#008080が外枠の色、tdの後のbgcolor="#FFE4E1が中の色です。上の2つの両方を使うと外枠・中身それぞれに色をつけることができます。

それぞれに色がつきました

ちなみに上記のtableの横のborderを消すとこの様に線が消えて、緑色が残るので外枠の代わりをしてくれます。

外枠が二重線になりました

<table border bordercolor="#DA70D6">
<tr>
<td>外枠が二重線になりました</td>
</tr>
</table>

borderの後にbordercolor="#DA70D6"を入れると外枠が二重線になって色もつきます。

二重線の間に色がつきました

<table border bordercolor="#DA70D6" bgcolor="#99ff66">
<tr>
<td bgcolor="#EEE8AA">二重線の間に色がつきました</td>
</tr>
</table>

さらにbordercolorの後にbgcolor="#99ff66"を入れると、二重線の間に色がつきます。注意点はtdの後にもbgcolor="#EEE8AA"を入れないと、二重線の間だけでなく中にも色が侵食してきて間だけに色を入れることができません。
二重線の間に色がつきました

このように中にも色が入ってきてしまいます。

外枠が立体的で色もつきました

<table border="5" bordercolorlight="#33cccc" 
bordercolordark="#3300cc">
<tr>
<td>外枠が立体的で色もつきました</td>
</tr>
</table>

上から2番目の外枠を立体的でやったborderの後にborder="5"を入れて立体的にして、bordercolorlight="#33cccc"は立体の枠の明るい部分の色・bordercolordark="#3300cc"は立体の枠の暗い部分の色をつける事ができます。

立体的な外枠と中の間の色もつきました

<table border="5" bordercolorlight="#33cccc" 
bordercolordark="#3300cc" bgcolor="#99ffff">
<tr>
<td bgcolor="#FFFFFF">立体的な外枠と中の間
の色もつきました</td>
</tr>
</table>

さらにbordercolordarkの後にbgcolor="#99ffff"を入れて、tdの後にbgcolor="#FFFFFF"を入れると立体的な外枠と中の間の細かい所にまで色をつける事ができます。(#FFFFFFは白色です)

背景に画像を使いました

<table border background="kingyo.gif">
<tr>
<td>背景に画像を使いました</td>
</tr>
</table>

色ではなくて、画像を使いたい場合はbackgroundを使います。background="kingyo.gif"の様に自分の持っている画像をアップロードなどして使えます。もちろんtdの後に入れれば、全体でなく枠の中だけにもできます。

これらを色々組み合わせると、様々な表の飾り方ができます。機会があれば自分で色々やってみると面白いですよ!

次回は複数の枠の表の飾り方です。    <つづく>


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


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
いつも、使わせてもらってありがとうございます。
非常に解りやすく、解説されていると思います。
おかげで、私のブログも進化しつつあり、嬉しいです。
今後ともよろしくお願い致します。
マサチコさんへ
テーブルタグって何かをまとめる時にすごく便利ですよね!
お互いブログつくりを頑張りましょう!!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/83-8513a849   

Template Designed by DW99