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){表の下に文字を表示。};

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

表の下に文字を表示。

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

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

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

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

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

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

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

ご意見箱

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

• 表の中の文字列を右、中央、左に設定する方法はありますか？ -- 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

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