全て | カテゴリ未分類 | HTML文字画像リンク | HTMLタグ(テーブル) | HTML(応用編) | 楽天で購入した商品 | スポーツ,アウトドア,車,バイク | 心緒 | インテリア,ライト,収納,ベビー,キッズ | アフィリエイト入門編 | TV・オーディオ・カメラ | 自己管理,美容,インナー | DVD,CD,本,旅,楽器 | 生活,美容,健康,家電 | 金運アップ,風水,自己トレ | ユーザービリティとSEO | 楽天市場のPR | アフィリエイト | 音楽 | 食品,グルメ,飲料 | ダイエット,健康,食品 | 園芸,DIY,ペット,おもちゃゲーム | 日用品雑貨,キッチン用品,寝具 | パソコン・周辺機器 | ファッション,ジュエリー,アクセサリー,靴 | 防災,介護,医療 | ブランド雑貨,時計 | 酒場放浪記 | 天気気象予報 | 気になる動画 | 最近チェックした商品 | 血圧測定 | 気になるニュース | 人生の名言集
2007.01.11
XML
カテゴリ: HTML(応用編)
・応用編


■ 色々なテーブル枠4


今回は、テーブルの作り方応用編です。



今までのテーブルは

ここに画像や文章をいれる ここに画像や文章をいれる
ここに画像や文章をいれる ここに画像や文章をいれる




入力ソース

<table border="1"><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr></table>





ここに画像や文章をいれる ここに画像や文章をいれる
ここに画像や文章をいれる ここに画像や文章をいれる




入力ソース

<table border="1" bordercolor="#ff9900" ><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr></table>





ここに画像や文章をいれる ここに画像や文章をいれる
ここに画像や文章をいれる ここに画像や文章をいれる




入力ソース

<table border="1" bordercolor="#ff9900" cellspacing="0" ><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr></table>

でした。



今回のテーブルは、今までのテーブルと比べて、枠の線を
より細くキレイに見せることができます。




例えば次の例を見てください

ここに文章や画像を入れる ここに文章や画像を入れる
ここに文章や画像を入れる ここに文章や画像を入れる




入力ソース

<table cellspacing="1" bgcolor="ff9900" cellpadding="5" width=" 100% "><tr><td width="50%" bgcolor="#ffffff" >ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr></table>


今までは「table」の中に、外枠を表示する属性「border=""」を入れていたと思いますが
今回は入れないでテーブルをタテ・ヨコに並べていく方法です。



<table> の中に入れる属性

cellspacing="" 」は、外枠の太さを表します。

<table> 内の「 bgcolor="" 」は、今回の場合は、外枠の色を表します。

<td> 内の「 bgcolor="" 」は、テーブル内の背景色を表します。

cellpadding="" 」は、外枠と、枠の中の(画像・文字)の間隔を調節します。

width 」は、テーブルのヨコ幅を指定。



<td> の中に入れる属性

width 」は、テーブルのヨコ幅

bgcolor 」は、テーブルの背景色



今回のポイントは

【1】

「table」の中に「border」属性を入れない
テーブルの中に、「 cellspacing 」「 bgcolor 」「 cellpadding 」の属性を入力する。

【2】

<td> の中に、「 width 」「 bgcolor 」属性を入力する。


これらを入力し忘れると、テーブルが崩れます!

width=" 数値 " に入れる数値は「 % 」でも「 数字 」でもOK です。

ちなみに「 100% 」にした場合、横幅いっぱいにどこかにぶつかるまで伸びていきます。
50% 」は、その半分になります。



width="50%" 」にした場合

ここに文章や画像を入れる ここに文章や画像を入れる
ここに文章や画像を入れる ここに文章や画像を入れる




入力ソース

<table cellspacing="1" bgcolor="ff9900" cellpadding="5" width=" 50% "><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr></table>



慣れるまで大変かも知れませんが
このテーブルの作り方を覚えておくと

めちゃめちゃ便利です!










お気に入りの記事を「いいね!」で応援しよう

Last updated  2008.12.21 10:27:55


【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

© Rakuten Group, Inc.
X

Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: