全て
| カテゴリ未分類
| HTML文字画像リンク
| HTMLタグ（テーブル）
| HTML（応用編）
| 楽天で購入した商品
| スポーツ,アウトドア,車,バイク
| 心緒
| インテリア,ライト,収納,ベビー,キッズ
| アフィリエイト入門編
| TV・オーディオ・カメラ
| 自己管理,美容,インナー
| DVD,CD,本,旅,楽器
| 生活,美容,健康,家電
| 金運アップ,風水,自己トレ
| ユーザービリティとSEO
| 楽天市場のPR
| アフィリエイト
| 音楽
| 食品,グルメ,飲料
| ダイエット,健康,食品
| 園芸,DIY,ペット,おもちゃゲーム
| 日用品雑貨,キッチン用品,寝具
| パソコン・周辺機器
| ファッション,ジュエリー,アクセサリー,靴
| 防災,介護,医療
| ブランド雑貨,時計
| 酒場放浪記
| 天気気象予報
| 気になる動画
| 最近チェックした商品
| 血圧測定
| 気になるニュース
| 人生の名言集
2007.01.11
テーマ： ホームページ作成の悩み(550)
カテゴリ： 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>
慣れるまで大変かも知れませんが
このテーブルの作り方を覚えておくと
めちゃめちゃ便利です！
■ 色々なテーブル枠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
[HTML（応用編）] カテゴリの最新記事
-
ホームページＨＴＭＬソースの基本構造 2008.04.04
-
カーソルの形状を変更する方法 2008.03.22
-
楽天広場HTML講座 スクロールバーのテンプ… 2007.06.30
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
