Movable Type用ShortCodeプラグイン・その2（tableショートコード）

ShortCodeプラグインの解説の第2回です。
第1回で標準で装備しているショートコードの概要を紹介しましたが、今回からは個々のショートコードの具体的な書き方を紹介します。
今回は、tableショートコードを紹介します。

1.基本的な書き方

tableショートコードのもっとも基本的な書き方は、以下のようになります。 

[table]
値1-1,値1-2,・・・,値1-n
値2-1,値2-2,・・・,値2-n
・・・
値m-1,値m-2,・・・,値m-n
[/table]

上のショートコードは、以下のようなtable要素に変換されます。
ショートコード内の各行が、table要素の個々の行に対応します。
また、ショートコード内のコンマで区切った個々の値が、table要素の個々のセルに対応します。 

<table>
<tr><td>値1-1</td><td>値1-2</td>・・・<td>値1-n</td></tr>
<tr><td>値2-1</td><td>値2-2</td>・・・<td>値2-n</td></tr>
・・・
<tr><td>値m-1</td><td>値m-2</td>・・・<td>値m-n</td></tr>
</table>

2.オプション

tableショートコードは、以下のようにオプションを指定することもできます。 

[table オプション="値" オプション="値"・・・]
・・・
[/table]

指定できるオプションには、以下のようなものがあります。

オプション内容
class="クラス名"このオプションを追加すると、tableタグに「class="クラス名"」の部分が追加され、table要素のクラスを指定することができます。
header="1"このオプションを指定すると、表の先頭の行を見出しとみなし、行の個々のセルをth要素で出力します。
header_class="クラス名"header="1"のオプションを指定した場合に、表の先頭行のtrタグに「class="クラス名"」を追加し、その行のクラスを指定できるようにします。
stripe="クラス名1","クラス名2",・・・,"クラス名n"表の各行のtrタグに、「class="クラス名1"」「class="クラス名2"」などのクラスを順に振ります。
偶数行と奇数行で行の背景色を変えたいようなときに使います。
ただし、header="1"のオプションを指定した場合、表の2行目以降に順にクラスを振ります（表の先頭行のクラスは、header_class="クラス"のオプションで指定）。

3.オプション指定の例

3-2.classオプション

table要素に「class="my_class"」のクラスを指定する場合。

  • 入力するショートコード 
    [table class="my_table"]
値1-1,値1-2,・・・,値1-n
値2-1,値2-2,・・・,値2-n
・・・
値m-1,値m-2,・・・,値m-n
[/table]
  • 得られる出力 
    <table class="my_table">
<tr><td>値1-1</td><td>値1-2</td>・・・<td>値1-n</td></tr>
<tr><td>値2-1</td><td>値2-2</td>・・・<td>値2-n</td></tr>
・・・
<tr><td>値m-1</td><td>値m-2</td>・・・<td>値m-n</td></tr>
</table>

3-2.headerオプションとheader_classオプション

表の先頭行を見出しにし、その行のtr要素に「class="tblheader"」のクラスを指定する場合。

  • 入力するショートコード 
    [table header="1" header_class="tblheader"]
見出し1,見出し2,・・・,見出しn
値1-1,値1-2,・・・,値1-n
値2-1,値2-2,・・・,値2-n
・・・
値m-1,値m-2,・・・,値m-n
[/table]
  • 得られる出力 
    <table>
<tr class="tblheader"><th>見出し1</th><th>見出し2</th>・・・<th>見出しn</th></tr>
<tr><td>値1-1</td><td>値1-2</td>・・・<td>値1-n</td></tr>
<tr><td>値2-1</td><td>値2-2</td>・・・<td>値2-n</td></tr>
・・・
<tr><td>値m-1</td><td>値m-2</td>・・・<td>値m-n</td></tr>
</table>

3-3.すべてのオプション

以下のように表示する場合。

  • tableタグに「class="my_table"」のクラスを指定
  • 表の先頭行を見出しにし、その行のtr要素に「class="tblheader"」のクラスを指定
  • 2行目以降のtr要素に「class="odd"」と「class="even"」を交互に指定する場合
  • 入力するショートコード 
    [table class="my_table" header="1" header_class="tblheader" stripe="odd","even"]
見出し1,見出し2,・・・,見出しn
値1-1,値1-2,・・・,値1-n
値2-1,値2-2,・・・,値2-n
値3-1,値3-2,・・・,値3-n
値4-1,値4-2,・・・,値4-n
・・・
[/table]
  • 得られる出力 
    <table class="my_table">
<tr class="tblheader"><th>見出し1</th><th>見出し2</th>・・・<th>見出しn</th></tr>
<tr class="odd"><td>値1-1</td><td>値1-2</td>・・・<td>値1-n</td></tr>
<tr class="even"><td>値2-1</td><td>値2-2</td>・・・<td>値2-n</td></tr>
<tr class="odd"><td>値3-1</td><td>値3-2</td>・・・<td>値3-n</td></tr>
<tr class="even"><td>値4-1</td><td>値4-2</td>・・・<td>値4-n</td></tr>
・・・
</table>