テンプレートとアクセスアップのでめらら楽天日記

2-1外枠を変えよう

ＨＯＭＥ >> でめららTips >>テンプレート上級編(1)
2-1外枠を変えよう
■tableタグに frame="" 属性を追加すると、外枠の表示スタイルを指定することができます。
この指定はIEで対応しています。（その他未確認）

frame="" 属性の記述方法と種類は次のようになります。

<table frame="○○">

□void（全ての外枠を非表示）
□lhs（左の外枠のみ表示します）
□rhs（右の外枠のみ表示します）
□vsides（左右の外枠のみ表示します）
□above（上の外枠のみ表示します）
□below（下の外枠のみ表示します）
□hsides（上下の外枠のみ表示します）
□box（全ての外枠を表示します）
□border（全ての外枠を表示します）

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

□void（全ての外枠を非表示）
<table border="5" bordercolor="red" frame="void">
<tr>
<td>文章・画像1</td>
<td>文章・画像2</td>
<td>文章・画像3</td>
</tr>
<TR>
<td>文章・画像4</td>
<td>文章・画像5</td>
<td>文章・画像6</td>
</tr>
</table>

↓こんな感じですね（＾＾）
文章・画像1 文章・画像2 文章・画像3
文章・画像4
 文章・画像5 文章・画像6
□lhs（左の外枠のみ表示します）
<table border="5" bordercolor="red" frame="lhs">
<tr>
<td>文章・画像1</td>
<td>文章・画像2</td>
<td>文章・画像3</td>
</tr>
<TR>
<td>文章・画像4</td>
<td>文章・画像5</td>
<td>文章・画像6</td>
</tr>
</table>

↓こんな感じですね（＾＾）
文章・画像1 文章・画像2 文章・画像3
文章・画像4
 文章・画像5 文章・画像6
□rhs（右の外枠のみ表示します）
<table border="5" bordercolor="red" frame="rhs">
<tr>
<td>文章・画像1</td>
<td>文章・画像2</td>
<td>文章・画像3</td>
</tr>
<TR>
<td>文章・画像4</td>
<td>文章・画像5</td>
<td>文章・画像6</td>
</tr>
</table>

↓こんな感じですね（＾＾）
文章・画像1 文章・画像2 文章・画像3
文章・画像4
 文章・画像5 文章・画像6
□vsides（左右の外枠のみ表示します）
<table border="5" bordercolor="red" frame="vsides">
<tr>
<td>文章・画像1</td>
<td>文章・画像2</td>
<td>文章・画像3</td>
</tr>
<TR>
<td>文章・画像4</td>
<td>文章・画像5</td>
<td>文章・画像6</td>
</tr>
</table>

↓こんな感じですね（＾＾）
文章・画像1 文章・画像2 文章・画像3
文章・画像4
 文章・画像5 文章・画像6
□above（上の外枠のみ表示します）
<table border="5" bordercolor="red" frame="above">
<tr>
<td>文章・画像1</td>
<td>文章・画像2</td>
<td>文章・画像3</td>
</tr>
<TR>
<td>文章・画像4</td>
<td>文章・画像5</td>
<td>文章・画像6</td>
</tr>
</table>

↓こんな感じですね（＾＾）
文章・画像1 文章・画像2 文章・画像3
文章・画像4
 文章・画像5 文章・画像6
□below（下の外枠のみ表示します）
<table border="5" bordercolor="red" frame="below">
<tr>
<td>文章・画像1</td>
<td>文章・画像2</td>
<td>文章・画像3</td>
</tr>
<TR>
<td>文章・画像4</td>
<td>文章・画像5</td>
<td>文章・画像6</td>
</tr>
</table>

↓こんな感じですね（＾＾）
文章・画像1 文章・画像2 文章・画像3
文章・画像4
 文章・画像5 文章・画像6
□hsides（上下の外枠のみ表示します）
<table border="5" bordercolor="red" frame="hsides">
<tr>
<td>文章・画像1</td>
<td>文章・画像2</td>
<td>文章・画像3</td>
</tr>
<TR>
<td>文章・画像4</td>
<td>文章・画像5</td>
<td>文章・画像6</td>
</tr>
</table>

↓こんな感じですね（＾＾）
文章・画像1 文章・画像2 文章・画像3
文章・画像4
 文章・画像5 文章・画像6
□box（全ての外枠を表示します）
<table border="5" bordercolor="red" frame="box">
<tr>
<td>文章・画像1</td>
<td>文章・画像2</td>
<td>文章・画像3</td>
</tr>
<TR>
<td>文章・画像4</td>
<td>文章・画像5</td>
<td>文章・画像6</td>
</tr>
</table>

↓こんな感じですね（＾＾）
文章・画像1 文章・画像2 文章・画像3
文章・画像4
 文章・画像5 文章・画像6
□border（全ての外枠を表示します）
<table border="5" bordercolor="red" frame="border">
<tr>
<td>文章・画像1</td>
<td>文章・画像2</td>
<td>文章・画像3</td>
</tr>
<TR>
<td>文章・画像4</td>
<td>文章・画像5</td>
<td>文章・画像6</td>
</tr>
</table>

↓こんな感じですね（＾＾）
文章・画像1 文章・画像2 文章・画像3
文章・画像4
 文章・画像5 文章・画像6
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
ランキング 　 リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
--ＭＥＮＵ--
【テーブルタグ基本編】
  1. テーブルを作ろう！
  2. 枠の太さと色を変えよう！
  3. 背景を飾ろう！
  4. 大きさを決めよう！
  5. 文字･画像の位置を変えよう
  6. 複数行、列にまたがるセル
  7. 入れ子にしてみう！
  8. 枠線を変えよう！
  9. styleの枠線を付けよう！
  10. 直接指定で余白を変えよう
【テーブルタグ上級編】
  1. 外枠を変えよう
  2. 内枠を変えよう
  3. タイトル見出し
  4. 自動改行禁止
  5. 回り込みと解除
  6. グループ化（行）
  7. グループ化（列）
  8. 枠線の色を2色指定
  9. 画像周りの文章
【テキストタグ編】
  1. 基本の構成
  2. 段落と改行
  3. 文章の引用
  4. 文章の装飾
  5. スクロールと点滅
  6. 文字の装飾
  7. リスト(順番なし)
  8. リスト(順番あり)
  9. リスト(定義付け)
  10. アンカータグでリンク
【ＰＲ】
・ 便利でお得【プライオリティワン】
便利でお得な情報コミュニティーサイト
http://www.priority-one.info/

・ 女性下着通販【インナーコレクション】
可愛い女性下着の通販専門サイト
/http://www.priority-one.info/inner/

・ 腸内洗浄紹介【HQCCゲルソン】
肝機能を促進する腸内洗浄紹介ページです。
http://www.priority-one.info/enema/

・ 化粧品通販【cosme-PRIORITY ONE】
基礎化粧品からメイクアップ化粧品、自然化粧品、アンチエイジング、ナノテクノロジー化粧品etc
http://www.priority-one.info/cosme/


© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: