全て
| カテゴリ未分類
| HTML文字画像リンク
| HTMLタグ（テーブル）
| HTML（応用編）
| 楽天で購入した商品
| スポーツ,アウトドア,車,バイク
| 心緒
| インテリア,ライト,収納,ベビー,キッズ
| アフィリエイト入門編
| TV・オーディオ・カメラ
| 自己管理,美容,インナー
| DVD,CD,本,旅,楽器
| 生活,美容,健康,家電
| 金運アップ,風水,自己トレ
| ユーザービリティとSEO
| 楽天市場のPR
| アフィリエイト
| 音楽
| 食品,グルメ,飲料
| ダイエット,健康,食品
| 園芸,DIY,ペット,おもちゃゲーム
| 日用品雑貨,キッチン用品,寝具
| パソコン・周辺機器
| ファッション,ジュエリー,アクセサリー,靴
| 防災,介護,医療
| ブランド雑貨,時計
| 酒場放浪記
| 天気気象予報
| 気になる動画
| 最近チェックした商品
| 血圧測定
| 気になるニュース
| 人生の名言集
2007.02.19
テーマ： ホームページ作成の悩み(550)
カテゴリ： HTML（応用編）
・応用編
今回は、テーブルの枠自体を変えて遊んでみます。
前回も書きましたが、「習うより慣れよう！」です。
ということで、じゃんじゃん例題を載せていきますので、
実際に遊んで覚えてみましょう！
まずは、この表を基本形とします。
入力ソースはこちら。
外枠無しtableに「 frame="void" 」を入力
入力ソースはこちら。
左右の枠を非表示tableに「 frame="hsides" 」を入力
入力ソースはこちら。
上下の枠を非表示tableに「 frame="vsides" 」を入力
入力ソースはこちら。
左の枠のみ表示tableに「 frame="lhs" 」を入力
入力ソースはこちら。
右の枠のみ表示tableに「 frame="rhs" 」を入力
入力ソースはこちら。
上の枠のみ表示tableに「 frame="above" 」を入力
入力ソースはこちら。
下の枠のみ表示tableに「 frame="below" 」を入力
入力ソースはこちら。
このように色々な枠を表示させることができました。
次回は、この枠をつかって、さらに遊んでみます！
今回は、テーブルの枠自体を変えて遊んでみます。
前回も書きましたが、「習うより慣れよう！」です。
ということで、じゃんじゃん例題を載せていきますので、
実際に遊んで覚えてみましょう！
まずは、この表を基本形とします。
| 文字１ | 文字２ |
|---|---|
| 文字３ | 文字４ |
| 文字５ | 文字６ |
入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0"><tr><td>文字１</td><td>文字２</td></tr><tr><td>文字３</td><td>文字４</td></tr><tr><td>文字５</td><td>文字６</td></tr></table>
外枠無しtableに「 frame="void" 」を入力
| 文字１ | 文字２ |
|---|---|
| 文字３ | 文字４ |
| 文字５ | 文字６ |
入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="void"><tr><td>文字１</td><td>文字２</td></tr><tr><td>文字３</td><td>文字４</td></tr><tr><td>文字５</td><td>文字６</td></tr></table>
左右の枠を非表示tableに「 frame="hsides" 」を入力
| 文字１ | 文字２ |
|---|---|
| 文字３ | 文字４ |
| 文字５ | 文字６ |
入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="hsides"
><tr><td>文字１</td><td>文字２</td></tr><tr><td>文字３</td><td>文字４</td></tr><tr><td>文字５</td><td>文字６</td></tr></table>
上下の枠を非表示tableに「 frame="vsides" 」を入力
| 文字１ | 文字２ |
|---|---|
| 文字３ | 文字４ |
| 文字５ | 文字６ |
入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="vsides"
><tr><td>文字１</td><td>文字２</td></tr><tr><td>文字３</td><td>文字４</td></tr><tr><td>文字５</td><td>文字６</td></tr></table>
左の枠のみ表示tableに「 frame="lhs" 」を入力
| 文字１ | 文字２ |
|---|---|
| 文字３ | 文字４ |
| 文字５ | 文字６ |
入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="lhs"
><tr><td>文字１</td><td>文字２</td></tr><tr><td>文字３</td><td>文字４</td></tr><tr><td>文字５</td><td>文字６</td></tr></table>
右の枠のみ表示tableに「 frame="rhs" 」を入力
| 文字１ | 文字２ |
|---|---|
| 文字３ | 文字４ |
| 文字５ | 文字６ |
入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="rhs"
><tr><td>文字１</td><td>文字２</td></tr><tr><td>文字３</td><td>文字４</td></tr><tr><td>文字５</td><td>文字６</td></tr></table>
上の枠のみ表示tableに「 frame="above" 」を入力
| 文字１ | 文字２ |
|---|---|
| 文字３ | 文字４ |
| 文字５ | 文字６ |
入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="above"
><tr><td>文字１</td><td>文字２</td></tr><tr><td>文字３</td><td>文字４</td></tr><tr><td>文字５</td><td>文字６</td></tr></table>
下の枠のみ表示tableに「 frame="below" 」を入力
| 文字１ | 文字２ |
|---|---|
| 文字３ | 文字４ |
| 文字５ | 文字６ |
入力ソースはこちら。
<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="below"
><tr><td>文字１</td><td>文字２</td></tr><tr><td>文字３</td><td>文字４</td></tr><tr><td>文字５</td><td>文字６</td></tr></table>
このように色々な枠を表示させることができました。
次回は、この枠をつかって、さらに遊んでみます！
お気に入りの記事を「いいね！」で応援しよう
Last updated
2008.12.21 10:27:11
[HTML（応用編）] カテゴリの最新記事
-
ホームページＨＴＭＬソースの基本構造 2008.04.04
-
カーソルの形状を変更する方法 2008.03.22
-
楽天広場HTML講座 スクロールバーのテンプ… 2007.06.30
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
