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

テーブル編

テーブル編

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

#html2で表の罫線を消す

QHMの表はおまじないでは罫線を消すことができませんが、以下の方法で指定した表だけ罫線を消すことが可能です。

■手順

  1. #beforescriptを使用して、罫線を消すクラス(noframe)を作成します。QHMの表のクラス名は style_tableなので、このクラスの前にnoframeクラスを定義することで、子孫関係を作ります。この#beforescriptはページ内でしたらどこに書いてもOKです。
    全ページに適用したいときは、設定画面の「その他のタグ」に入れてください。ただし、そのときは #beforescript{{ と 最後の }} は不要です。

    1. noframeクラスが親です。
    2. 子孫
      style_tableクラスが子孫です。
  2. 罫線を消したい表のおまじないの前に #html2 で親のクラス名(noframe)を指定します。
  3. 表のおまじないの終わりに、#html2(</div>) を書くことで、noframeクラスの終わりを指定します。

■解説

noframeクラスがstyle_tableクラスの親になるので、noframeクラスを指定した表だけ罫線が消えます。noframeクラスを指定しないと、QHM標準のstyle_tableクラスが有効になり表に罫線が表示されます。

【ソース】
#beforescript{{
<style type="text/css">
<!--
.noframe .style_table{
background-color:transparent;
}
-->
</style>
}}

#html2(<div class="noframe">)
CENTER:表1 罫線なし(#html2の指定あり)
|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
#html2(</div>)

CENTER:表2 罫線あり(#html2の指定なし)
|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |

表1 罫線なし(#html2の指定あり)

タイトル1タイトル2タイトル3
項目1項目2項目3
項目4項目5項目6

表2 罫線あり(#html2の指定なし)

タイトル1タイトル2タイトル3
項目1項目2項目3
項目4項目5項目6

表の高さを変更する

(2012.04.14追加)

表の行間または余白を変更することで、表の高さをを変更します。以下のソースを対象の表があるページ内に記述してください。
全ページの表を対象とする場合は、ナビ2に入れると良いです。
padding とline-height は適当に変更してください。

【解説】
以下の例では、ある特定の表のみ高さを変更したい場合を考慮して、thistbl というクラス(スタイル名)を作成しています。対象の表を #html2 で囲んでthistblクラスを指定しています。
ページ内の全部の表を対象にする場合は、この thistbl というクラスは不要です。
style_tdクラスは、QHMで定義している表のクラスです。

1.特定の表のみ高さを変更したい場合

【ソース】
#beforescript{{
<style type="text/css">
<!--
.thistbl .style_td {
    padding: 3px;
    line-height: 100%;
}
-->
</style>
}}

#html2(<div class="thistbl">)
CENTER:1.特定の表のみ高さを変更したい場合

|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
#html2(</div>)

1.特定の表のみ高さを変更したい場合

タイトル1タイトル2タイトル3
項目1項目2項目3
項目4項目5項目6

2.ページ内の全部の表に対し高さを変更したい場合
以下のスクリプトをページ内に記述するだけでOKです。

【ソース】
#beforescript{{
<style type="text/css">
<!--
.style_td {
    padding: 2px;
    line-height: 100%;
}
-->
</style>
}}

表の表示位置を変更する

(2012.05.03追加)

表のマージンを変更することで、表の位置(左寄せ、中央寄せ、右寄せ)を変更します。以下のソースを対象の表があるページ内に記述してください。
全ページの表を対象とする場合は、#beforescript をナビ2に入れると良いです。

【解説】
以下の例では、ある特定の表のみ位置を変更したい場合を考慮して、tblpos というクラス(スタイル名)を作成しています。対象の表を #html2 で囲んで tblpos クラスを指定しています。
ページ内の全部の表を対象にする場合は、この tblpos というクラスは不要です。
style_tdクラスは、QHMで定義している表のクラスです。
marginを変更して、表の表示位置を変更します。

  • 右寄せの場合 :margin: auto 0 auto auto;
  • 中央寄せの場合:margin: auto auto auto auto;
  • 左寄せの場合 :margin: auto auto auto 0;

1.特定の表のみ表示位置を変更したい場合(右寄せの例)

【ソース】
#beforescript{{
<style type="text/css">
<!--
.tblpos .style_table {
   margin: auto 0 auto auto;
}
-->
</style>
}}

#html2(<div class="tblpos">)
CENTER:1.特定の表のみ右寄せにする場合

|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
#html2(</div>)

1.特定の表のみ右寄せにする場合

タイトル1タイトル2タイトル3
項目1項目2項目3
項目4項目5項目6

2.ページ内の全部の表に対し位置を変更したい場合(右寄せの例)
以下のスクリプトをページ内に記述するだけでOKです。

【ソース】
#beforescript{{
<style type="text/css">
<!--
.style_table {
   margin: auto 0 auto auto;
}
-->
</style>
}}

テーブル内にリンクを張る

(2016.06.21追加)
テーブル内にリンクを張りたいときは、HTMLを書く必要があります。#html2を使うことがポイントです。

おまじない

|リンク先1|#html2(<a href="http://www.google.com">googleへジャンプ</a>)|
|リンク先2|#html2(<a href="http://haik.qhmtips.com">haikユーザのためのTipsへジャンプ</a>)|

【注意】

#html2を使うときは、#html2( ) のかっこ内には改行は使用できないため、改行は削除する必要があります。

ご意見箱

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

  • 大変有用な情報を有難うございました! -- ひょうたん水クラブ 2010-06-24 (木) 14:03:39
  • こういうまとめは本当に助かります!ありがとうございます! -- 匿名希望 2011-05-14 (土) 22:14:14
  • これを本文に適用したところメニューが表示されなくなりました。どうしたらよいでしょうか。 -- 新井 2012-12-30 (日) 17:00:44
  • すぐにご対応くださってありがとうございました! -- 天才エンジニア 2016-06-22 (水) 23:57:24

認証コード(5049)

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

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

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

最新の更新 RSS  Valid XHTML 1.0 Transitional