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





今回は、テーブルの枠自体を変えて遊んでみます。



前回も書きましたが、「習うより慣れよう!」です。

ということで、じゃんじゃん例題を載せていきますので、
実際に遊んで覚えてみましょう!


まずは、この表を基本形とします。

文字1 文字2
文字3 文字4
文字5 文字6



入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0"><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>







外枠無しtableに「 frame="void" 」を入力


文字1 文字2
文字3 文字4
文字5 文字6



入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="void"><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>







左右の枠を非表示tableに「 frame="hsides" 」を入力


文字1 文字2
文字3 文字4
文字5 文字6



入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="hsides" ><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>







上下の枠を非表示tableに「 frame="vsides" 」を入力


文字1 文字2
文字3 文字4
文字5 文字6



入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="vsides" ><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>







左の枠のみ表示tableに「 frame="lhs" 」を入力


文字1 文字2
文字3 文字4
文字5 文字6



入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="lhs" ><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>







右の枠のみ表示tableに「 frame="rhs" 」を入力


文字1 文字2
文字3 文字4
文字5 文字6



入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="rhs" ><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>







上の枠のみ表示tableに「 frame="above" 」を入力


文字1 文字2
文字3 文字4
文字5 文字6



入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="above" ><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>







下の枠のみ表示tableに「 frame="below" 」を入力


文字1 文字2
文字3 文字4
文字5 文字6



入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="below" ><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>






このように色々な枠を表示させることができました。

次回は、この枠をつかって、さらに遊んでみます!












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

Last updated  2008.12.21 10:27:11


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

© Rakuten Group, Inc.
X

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