QHM (Quick Homepage Maker) ユーザのためのTips集。小技から大技までテクニック満載

テーブル応用編

テーブル応用編

QHMのテーブル(表)についてのテクニックです。

注意 QHM 4.7から表の機能がかなり強化されました。表の配置、回り込み、表データの並び替え、クラス指定(CSSの)が可能になっています。以下の記述は QHM 4.27を元に検証しています。(2011.04.02追記)

表の位置を変更したり、罫線や背景色を変更した例です。

  • 表自体はおまじないで書いています。
  • 罫線と背景色はクラスを作成してあります。
  • 表の位置は、#html2で floatでスタイル指定してあります。
  • 表のおまじないの前後を #html2 で囲んであります。
  • 表の位置を指定したとき、以下のおまじないを書いてありますが、これは表の横に文字を回り込みさせたときにブッロクを終了する(改行して表の最後に文字を流す)ために指定します。
    #clear

以下を編集画面に記述してください。

#beforescript{{
<style type="text/css">
<!--
.style_table{
background-color:transparent;
}

/* サンプルtableの共通設定 */
.style_table table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 30px;
}
th, td{
  padding: 10px 20px;
  color: #1D5C79;
}

/* サンプル1 */
.sample1 th{
  border-bottom: 1px solid #1D5C79;
}

/* サンプル2 */
.sample2 th{
  border-bottom: 1px solid #1D5C79;
}
.sample2 td{
  border-bottom: 1px solid #DDD;
}

/* サンプル6 */
.sample6 th{
  background: #A0C9DB;
  border-top: 1px solid #1D5C79;
  border-bottom: 1px solid #FFF;
}
.sample6 td{
  background: #E5F2F8;
  border-bottom: 1px solid #FFF;
}

/* サンプル7 */
.sample7 th{
  background: #CAE5F1 url(swfu/d/th.jpg) repeat-x;
  border-top: 1px solid #1D5C79;
  border-bottom: 1px solid #FFF;
}
.sample7 td{
  background: #F4FAFC url(swfu/d/td.jpg) repeat-x;
  border-bottom: 1px solid #FFF;
}

/* サンプル9 */
.sample9 th{
  border-bottom: 1px solid #DDD;
}
.sample9 td{
  border-bottom: 1px solid #DDD;
}
-->
</style>
}}

No.1 タイトルの下だけ罫線あり 背景色なし float指定で左寄せ

#html2(<div style="float: left;">)
#html2(<div class="sample1">)
|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
| 項目7 | 項目8 | 項目9 |
#html2(</div></div>)
&color(blue){表の右側に文字を回り込ませた。この下に #clear を書くと回り込みが終了する。};
#clear
&color(green){表の下に文字を表示。};
タイトル1タイトル2タイトル3
項目1項目2項目3
項目4項目5項目6
項目7項目8項目9

表の右側に文字を回り込ませた。この下に #clear を書くと回り込みが終了する。

表の下に文字を表示。

No.2 下罫線だけあり 背景色なし float指定なし

#html2(<div class="sample2">)
|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
| 項目7 | 項目8 | 項目9 |
#html2(</div>)
タイトル1タイトル2タイトル3
項目1項目2項目3
項目4項目5項目6
項目7項目8項目9

No.3 タイトルの上罫線だけあり 背景色あり float指定で右寄せ

#html2(<div style="float: right;">)
#html2(<div class="sample6">)
|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
| 項目7 | 項目8 | 項目9 |
#html2(</div></div>)
#clear
タイトル1タイトル2タイトル3
項目1項目2項目3
項目4項目5項目6
項目7項目8項目9

No.4 罫線なし。タイトルのみ背景色あり float指定なし

#html2(<div class="sample7">)
|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
| 項目7 | 項目8 | 項目9 |
#html2(</div>)
タイトル1タイトル2タイトル3
項目1項目2項目3
項目4項目5項目6
項目7項目8項目9

No.5 下罫線あり float指定なし

#html2(<div class="sample9">)
|~タイトル1 |項目1 | 項目2 | 項目3 |
|~タイトル2 |項目4 | 項目5 | 項目6 |
|~タイトル3 |項目7 | 項目8 | 項目9 |
#html2(</div>)
タイトル1項目1項目2項目3
タイトル2項目4項目5項目6
タイトル3項目7項目8項目9

ご意見箱

皆様のご意見をお待ちします。

  • 表の中の文字列を右、中央、左に設定する方法はありますか? -- BUNN 2011-04-02 (土) 12:42:55
  • テーブルの枠内にCENTER: または  RIGHT: を指定すれば可能です。
    ツールボックスの 左寄せ、中央寄せ、右寄せ のボタンを使うと便利です。
    詳細は、以下を参照してください。
    "http://www.1st-easy-hp.com/p/qhmpro/index.php?EditTablePosition" -- tomzo 2011-04-02 (土) 16:18:01
  • tomzoさんご返事ありがとうございます。枠内にRIGHT:を記述するとそのまま表示します。URLは有料なので見れません! -- BUNN 2011-04-03 (日) 12:32:23
  • tomzoさんご返事ありがとうございます。枠内にRIGHT:を記述するとそのまま表示します。URLは有料なので見れません! -- BUNN 2011-04-03 (日) 13:46:30
  • tomzoさんできました。スペースが悪さしておりました。前投稿はブラウザを再読み込みしたら、二重投稿になってしまいました。これもpikiwikiプラグインの仕様でしょうか? -- BUNN 2011-04-03 (日) 14:20:09
  • たしかに二重投稿になるときがありますね。なぜでしょうか?原因はちょっとわかりません。 -- tomzo 2011-04-06 (水) 08:25:31

認証コード(7424)

当ページは役に立ちましたか?

選択肢 投票
たいへん役に立った 25  
ちょっとだけ役に立った 0  
普通 1  
あんまり 0  

powered by QHM 6.0.8 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional