TableStyleHelp

{{title テーブル・カラム属性の設定方法}}

テーブル・カラム属性

FreeStyleWikiに対して BugTrack-plugin/162 を適用した場合は、カンマ（","）で始まるテーブル定義に対して、各カラム毎にいくつかの属性を与えることができるようになります。

以下のような書式でカラム属性を設定できます。

個別指定

各カラムに対し、個別にカラム属性を設定していく記述方法です。テーブル・ソースの可読性は著しく低下しますが、カラム属性を設定したい部分に直接記述できます。また、「行指定」を事前に行っている場合は、同一属性値は上書きされます。

,カラム１{<属性>[:<属性値>]|<属性>[:<属性値>]...},カラム２{<属性>[:<属性値>]|<属性>[:<属性値>]...},...

列毎の一括指定

列毎にカラム属性を設定する記述方法です。テーブルの最初のカラムに"{c}"を指定した場合は「列一括指定行」となり、この行以降の行に適用されます。「個別指定」を併用すれば、設定したカラムの特定のカラム属性を上書きすることができます。

,{c},{<属性>[:<属性値>]|<属性>[:<属性値>]...},{<属性>[:<属性値>]|<属性>[:<属性値>]...},...
,カラム１,カラム２,...
,カラム１,カラム２,...
,カラム１{<属性>[:<属性値>]|<属性>[:<属性値>]...},カラム２,...

行属性指定（TRタグに対する属性設定です）

行にカラム属性を設定する記述方法です。テーブルの最初のカラムに"{r 属性}"を指定した場合は「行属性指定」となり、この行のTRタグに対して指定した属性が適用されます。

,{r <属性>[:<属性値>]|<属性>[:<属性値>]...},カラム１,カラム２,...
,{r <属性>[:<属性値>]|<属性>[:<属性値>]...},カラム１,カラム２,...
,{r <属性>[:<属性値>]|<属性>[:<属性値>]...},カラム１,カラム２,...

奇数行／偶数行属性指定（TRタグに対する属性設定です）

テーブルの最初のカラムに"{r1}"／"{r2}"を指定することによって、それぞれ奇数行／偶数行に対応した行属性を設定できます。この設定を利用する場合は、はテーブルの最初に設定する必要があります。

,{r1},{<属性>[:<属性値>]|<属性>[:<属性値>]...}
,{r2},{<属性>[:<属性値>]|<属性>[:<属性値>]...}

カラム属性のグループ設定

複数のカラム属性を一つのグループとして登録し、その登録名を利用してカラム属性を設定できるようにする記述方法です。テーブルの最初のカラムに"{c <グループ名>}"を指定して登録します。「個別指定」、「列毎の一括指定」でカラム属性を上書きすることもできます。

,{c C1},{<属性>[:<属性値>]|<属性>[:<属性値>]...}|...
,{c C2},{<属性>[:<属性値>]|<属性>[:<属性値>]...}|...

,カラム１{C1},カラム２,...
,カラム１{C2},カラム２,...

※ここで登録したグループ名は行属性指定"{r 属性値}"においても利用できます。

※属性グループは別のWikiページに設定し、その設定ページを include プラグインで挿入して利用すればページ内のソースがすっきり見えます。また、同様の属性グループを他のページに再利用でき有効に利用できます。

テーブル属性指定

テーブルの最初のカラムに"{t}"を指定することによって、テーブル自体に対していくつかの属性を設定できます。この設定を利用する場合は、はテーブルの最初に設定する必要があります。

,{t},{<属性>[:<属性値>]|<属性>[:<属性値>]...}
,カラム１,カラム２,...
,カラム１,カラム２,...

属性の設定項目一覧

各属性は カラム内に {} を使用して指定します。"|" で区切ることにより、複数のカラム属性を組み合わせて使用できます。

カラムに利用できる属性

LEFT	- カラム内の文字を左寄せに表示します。
CENTER	- カラム内の文字を中央に表示します。
RIGHT	- カラム内の文字を右寄せに表示します。
TOP	- カラム内の文字を上寄せに表示します。
MIDDLE	- カラム内の文字を上下中央に表示します。
BOTTOM	- カラム内の文字を下寄せに表示します。
BOLD	- カラム内の文字を太字で表示します。
ITALIC	- カラム内の文字を斜体で表示します。
COLOR	- カラム内の文字を指定色で表示します。(Ex: {COLOR:eeeeee})
BGCOLOR	- カラム内の背景を指定色で表示します。(Ex: {BGCOLOR:eeeeee})
SIZE	- カラムの幅を指定サイズ(px)にします。(Ex: {SIZE:150})
COLS	- カラムの（右）横方向連結を行います。(Ex: {COLS:2})
ROWS	- カラムの（下）縦方向連結を行います。(Ex: {ROWS:2})

行に利用できる属性

LEFT	- 行内の文字を左寄せに表示します。
CENTER	- 行内の文字を中央に表示します。
RIGHT	- 行内の文字を右寄せに表示します。
BOLD	- 行内の文字を太字で表示します。
ITALIC	- 行内の文字を斜体で表示します。
COLOR	- 行内の文字を指定色で表示します。(Ex: {COLOR:eeeeee})
BGCOLOR	- 行内の背景を指定色で表示します。(Ex: {BGCOLOR:eeeeee})

テーブルに利用できる属性

LEFT	 - テーブルを左寄せに表示します。値を設定することによって "margin-left" が設定できます。(Ex: {LEFT:50})
CENTER	 - テーブルを中央に表示します。
RIGHT	 - テーブルを右寄せに表示します。値を設定することによって "margin-right" が設定できます。(Ex: {RIGHT:50})
SIZE	 - テーブルの幅を指定サイズ(px)にします。(Ex: {SIZE:150})
CAPTION - テーブル・キャプション・タグを設定できます。
SUMMARY - テーブルのsummary属性を設定できます。

サンプル

以下に、いくつかのサンプルを示します。

通常のテーブル表示サンプル

,名称,産地,単位,金額
,りんご,青森産,100g,80円
,みかん,福岡産,100g,30円
,ぶどう,熊本産,100g,75円

個別指定のサンプル

,名称{SIZE:100},産地{SIZE:100},単位{SIZE:50|RIGHT},金額{SIZE:50|RIGHT}
,りんご{BOLD|BGCOLOR:ffff99},青森産{CENTER},100g{RIGHT},80円{RIGHT}
,みかん{BOLD|BGCOLOR:ffff99},福岡産{CENTER},100g{RIGHT},30円{BGCOLOR:ffcccc|RIGHT}
,ぶどう{BOLD|BGCOLOR:ffff99},熊本産{CENTER},100g{RIGHT},75円{RIGHT}

列一括指定のサンプル

先頭を,{c}で始め、次列より列数だけの属性指定を行う。設定値は、以降の行に適用されます。

,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
,名称,産地,単位,金額
,{c},{BOLD|BGCOLOR:ffff99},{CENTER|BGCOLOR:ccccff},{RIGHT|BGCOLOR:ccffff}
,りんご,青森産,100g,80円
,みかん,福岡産,100g,30円{BGCOLOR:ffcccc}
,ぶどう,熊本産,100g,75円

※テーブルの最初の行は THタグで構成されています。基本スタイルはCSSで定義しておきます。

行一括指定のサンプル

先頭を,{r 属性値}で始め、次列より通常のテーブル指定を行う

,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
,名称,産地,単位,金額
,りんご,青森産,100g,80円
,{r BGCOLOR:ffcccc},みかん,福岡産,100g,30円{BGCOLOR:ff9999}
,ぶどう,熊本産,100g,75円

奇数行／偶数行指定のサンプル

,{r1},{BGCOLOR:ffffdd}
,{r2},{BGCOLOR:ddddff}
,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
,名称,産地,単位,金額
,りんご,青森産,100g,80円
,みかん,福岡産,100g,30円{BGCOLOR:ffcccc}
,ぶどう,熊本産,100g,75円
,さくらんぼ,山形産,100g,300円

属性グループを利用したサンプル

,{c 名称},{BOLD|SIZE:100|BGCOLOR:ffff99}
,{c 産地},{SIZE:100|CENTER|BGCOLOR:ccccff}
,{c 単位},{SIZE:50|RIGHT|BGCOLOR:ccffff}
,{c 金額},{SIZE:50|RIGHT}
,{c 特売},{BGCOLOR:ffcccc}

,名称,産地,単位,金額
,りんご{名称},青森産{産地},100g{単位},80円{金額}
,みかん{名称},福岡産{産地},100g{単位},30円{金額|特売}
,ぶどう{名称},熊本産{産地},100g{単位},75円{金額}

テーブル属性の指定

,{t},{LEFT:50|SIZE:300|CAPTION:左寄せ}

,{t},{CENTER|SIZE:300|CAPTION:中央}

,{t},{RIGHT:50|SIZE:300|CAPTION:右寄せ}

複合利用サンプル

,{c 名称},{BOLD|SIZE:100|BGCOLOR:ffff99}
,{c 産地},{CENTER|BGCOLOR:ccccff}
,{c 単位},{RIGHT|BGCOLOR:ccffff}
,{c 金額},{RIGHT}
,{c 特売},{BGCOLOR:ffcccc}

,{t},{LEFT:100}
,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
,名称,産地,単位,金額
,{c},{名称},{産地},{単位},{金額}
,りんご,青森産,100g,80円
,みかん,福岡産,100g,30円{特売}
,ぶどう,熊本産,100g,75円

COLS,ROWSを利用したサンプル

以下の設定では「名称／産地」が colspan="2", 「りんご」が rowspan="2"になります。

,名称／産地{COLS:2},,単位,金額
,りんご{ROWS:2},青森産,100g,80円
,      ,長野産,100g,70円
,みかん,熊本産,100g,30円
,ぶどう,福岡産,100g,75円