PowerCMS ブログ

MTタグを使って4列の表を作る方法を紹介します。前提ですが、アイテムの数は変更されていくものとし、4で割り切れる保証はないと仮定します。

アイテムの名前を画像の alt属性、アイテムの説明にリンク先URL、タグに「@top_banner」を指定してトップページのバナーを出力するとします。

• 変数「__counter__」の値を op="mod" で4で割った余りを得ます。
• 余りが0 (4で割り切れた場合) の時
• __last__ でなければ </tr><tr> を出力します。
• 最後に </tr></table> を出力します。

以下のテンプレートで 4列の表組が生成されます。

<mt:Assets type="image" tag="@top_banner">
<mt:If name="__first__">
    <table>
        <tr>
</mt:If>
            <td><a href="<mt:AssetDescription>"><img src="<mt:AssetThumbnailURL width="240">" alt="<mt:AssetLabel escape="html">"></a></td>
<mt:Unless name="__counter__" op="mod" value="4">
        <mt:Unless name="__last__"></tr><tr></mt:Unless>
</mt:Unless>
<mt:If name="__last__">
        </tr>
    </table>
</mt:If>
</mt:Assets>

但し一点問題があります。セルの数が行毎に合わない可能性があるからです。Validatorは下記のようなエラーを吐きます。

• Ready to check - Nu Html Checker

Error: A table row was 3 columns wide, which is less than the column count established using column markup (4).

これを回避するには下記のようにすると良いかと思います。

• __last__ まで渡った時に、__counter__ を 4で割った余りを得る
• 4から余りの数字を引いて変数にセット
• MTFor タグを使って、空のタグ <td></td> を補完する

これで、4で割り切れない数のバナーが出力されたときも綺麗にセルの数がそろうようになります。

<mt:SetVar name="count_cols" value="4">
<mt:Assets type="image" tag="@top_banner">
<mt:If name="__first__">
    <table>
        <tr>
</mt:If>
            <td><a href="<mt:AssetDescription>"><img src="<mt:AssetThumbnailURL width="240">" alt="<mt:AssetLabel escape="html">"></a></td>
<mt:Var name="__counter__" op="mod" value="$count_cols" setvar="quarter">
<mt:Unless name="quarter">
        <mt:Unless name="__last__"></tr><tr></mt:Unless>
</mt:Unless>
<mt:If name="__last__">
    <mt:Var name="__counter__" op="mod" value="$count_cols" setvar="quater">
    <mt:If name="quarter">
    <mt:SetVar name="cols" value="$count_cols">
    <mt:Var name="cols" op="sub" value="$quarter" setvar="empty_cols">
        <mt:If name="empty_cols">
        <mt:For from="1" to="$empty_cols">
            <td></td>
        </mt:For>
        </mt:If>
    </mt:If>
        </tr>
    </table>
</mt:If>
</mt:Assets>