Work Tips

SuperTableの使い方

5年以上経過した古い記事です(Joomla2.5)

Abivia社のプラグイン「SuperTable」のインストールが必要です。

SuperTableのハイライト項目は縦枠のみ(FREE版)テーブルカラーは1種類のみです。

SuperTableのアクティブ化

通常のHTMLエディタを使用してテーブルを作成し、その後にSuperTableのコマンドで囲みます。

{supertable table [options]}
[optional commands]
あなたのHTMLテーブル
{/supertable}

例えば下記の表を作り

  2012年4月 2012年5月 2012年6月
IE8/9 44% 43.39% 46.25%
Safari 12.68% 13.41% 14.16%
Firefox 12.81% 12.96% 12.88%
Chrome 11.56% 12.03% 12.44%
Opera 2.07% 2.06% 2.03%

SuperTableのコマンドで囲む。 あなたのHTMLテーブル

 
IE8/9
Safari
Firefox
Chrome
Opera
2012年4月
44%
12.68%
12.81%
11.56%
2.07%
2012年5月
43.39%
13.41%
12.96%
12.03%
2.06%
2012年6月
46.25%
14.16%
12.88%
12.44%
2.03%

列と行の入れ替え {wrapper off} あなたのHTMLテーブル {/supertable}

 
2012年4月
2012年5月
2012年6月
IE8/9
44%
43.39%
46.25%
Safari
12.68%
13.41%
14.16%
Firefox
12.81%
12.96%
12.88%
Chrome
11.56%
12.03%
12.44%
Opera
2.07%
2.06%
2.03%

ヘッダー行の指定と高さの指定 あなたのHTMLテーブル {/supertable}

 
2012年4月
2012年5月
2012年6月
IE8/9
44%
43.39%
46.25%
Safari
12.68%
13.41%
14.16%
Firefox
12.81%
12.96%
12.88%
Chrome
11.56%
12.03%
12.44%
Opera
2.07%
2.06%
2.03%

縦(左)のヘッダー行の指定と幅の指定 あなたのHTMLテーブル {/supertable}

 
2012年4月
2012年5月
2012年6月
IE8/9
44%
43.39%
46.25%
Safari
12.68%
13.41%
14.16%
Firefox
12.81%
12.96%
12.88%
Chrome
11.56%
12.03%
12.44%
Opera
2.07%
2.06%
2.03%

ハイライト(アクティブ)の指定 あなたのHTMLテーブル {/supertable}

 
2012年4月
2012年5月
2012年6月
IE8/9
44%
43.39%
46.25%
Safari
12.68%
13.41%
14.16%
Firefox
12.81%
12.96%
12.88%
Chrome
11.56%
12.03%
12.44%
Opera
2.07%
2.06%
2.03%

ハイライトを無効にする あなたのHTMLテーブル {/supertable}

 
2012年4月
2012年5月
2012年6月
IE8/9
44%
43.39%
46.25%
Safari
12.68%
13.41%
14.16%
Firefox
12.81%
12.96%
12.88%
Chrome
11.56%
12.03%
12.44%
Opera
2.07%
2.06%
2.03%

 

サンプル
{wrapper off} デフォルト設定は "on"です。
クラス "ラッパー"を持つdivタグの出力を取り囲んでいる。これは、いくつかのテンプレートに問題を引き起こす可能性があります。ラッパーコマンドは、divを削除するために使用することができます。
左右幅の表示がおかしい場合は必ず「off」または「0」を指定してください。
{style width:898px} 表の左右幅を898pxにする
{active 3} 3番目をアクティブにする
{active 3}
{active disable}
Active Command
ユーザーがテーブルの上にマウスを移動されていない場合に強調表示される列を定義します。値「disable」で強調表示を無効にすることができます。
{headcols 1 15} 縦項目のヘッドは一列目で幅が15
{headrows 1} ヘッダーは1行目
{rowheight 1 45px} 一行目を高さ45pxにする
{bodywidth 10 15 15 30} Bodywidth Command
テーブル本体の列の幅を個別に制御を提供しています。値は相対的な重みとして表現さ​​れます。
{cssfile path/to/file.css} CSSファイルのコマンド
テーブルのCSSを含めることができます。通常、これは、classコマンドまたはテーブルの特定のスタイルをもたらすためにidコマンドと組み合わせて使用​​されます。
{id special-table} idコマンド
テーブルの外側のDIVのHTML idを設定します。これは、特定のCSSルールを適用するために使用することができます。
{clear 1} clearコマンド
表の後にクリアするDIVを追加します。値がゼロである場合は、何も追加されません。
{class monochrome} classコマンド
該当するHTMLにクラス識​​別子を追加します。テーブル·レベルで使用する場合、最も外側のDIVは、このクラスを追加しました。細胞レベルで使用する場合、セルの内容を含むDIVは、このクラスを追加しました。
{borders on} Borders Command
テーブルと、各列を囲む出力にDIVタグを追加します。これは、追加のスタイルオプションを提供することを意図している。デフォルト値はoffです。

 

Parameter
Trigger Word
CSS Mode
CSS Template
Custom CSS File
Put messages in
Debugging
説明
テーブルを開始するワード
ここで、テーブルのCSSを取得します。オプションは次のとおりです。 No additional CSS - CSSは既にテンプレートの一部として含まれていません。 SuperTable preset - "CSSテンプレート"パラメータで選択したスタイルを使用します。 Custom - "カスタムCSSファイル"パラメータで指定されたファイルで提供されたスタイルを使用します。
これは、定義済みのスタイルのリストです。
これは、カスタムCSSファイルへのパスです。
エラー/警告メッセージの出力を制御します。オプションは次のとおりです。 Off – メッセージが出力されません。 HTML Comments –メッセージが出力内にコメントとして書き込まれます。 Article Text – メッセージは記事の下部に表示されます。 注意: 同じメッセージが複数回表示されることがあります。これは避けられません。 記事のテキストのオプションは、コンテンツのみの記事で動作します。モジュール内のスーパー表に対するすべての呼び出しは、HTMLコメントを書き込むにフォールバックします。
診断情報の出力を制御します。診断は、ページ内のHTMLコメントとして表示されます。
Default
supertable
SuperTable preset
ahs
(blank)
HTML Comments
Off

Copyright©2019 Hi-DEMI,net All Rights Reserved.