【CakePHP】HtmlHelperを使ってテーブルを表示してみる。

CakePHP

2014.07.28

fukasawaです。こんにちは。
先程、お昼を買いにファミマに行ったのですがfujiharaさんに「国産メロンサンド」という商品をそっと手渡されました。試しに買ってみたのですが、メロンの優しく爽やかな甘さが高級感のある食パンにギチっとサンドされていて、思っていたよりも美味しかったです。ただ、パンに挟むにはちょっと水分が多めですメロン。

CakePHPのHtmlHelperにはHTMLタグを動的に出力するいろいろな機能が備わっています。その中にテーブルを出力するためのヘルパーが用意されているのですが、使ったことが無かったので、今回はその機能について書いてみたいと思います。

HtmlHelper — CakePHP Cookbook 2.x ドキュメント

※CakePHP 2.4.10 で検証しています。

簡単な使い方

まず、簡単なテーブルを出力してみます。テーブルを出力するために下記の２つの出力関数が用意されています。

テーブルヘッダー(<tr><th>～</th></tr>)を出力する	tableHeaders()
テーブルセル(<tr><td>～</td></tr>)を出力する	tableCells()

tableHeaders()でテーブルヘッダーの内容を取得する

tableHeaders()を使用してテーブルヘッダーの内容を取得してみます。セルに表示される値を配列にし、tableHeaders()の第一引数に渡してあげます。


<?php
$header_list = array("商品名","値段","産地");
$header_list = $this->Html->tableHeaders(
    $table_headers
);
?>

$header_listには下記のようなHTMLが入りました。


<tr>
 <th>商品名</th>
 <th>値段</th>
 <th>産地</th>
</tr>

tableCells()でテーブルセルの内容を取得する

次に、tableCells()を使用してテーブルセルの内容を取得してみます。
セルに表示される値を行ごとに配列で用意し、tableCells()の第一引数に渡してあげます。


<?php
$cells_list = array(
    array('りんご','500円','長野'),
    array('みかん','290円','愛媛'),
    array('納豆','198円','茨城'),
);
$cells_list = $this->Html->tableCells(
    $table_cells
);
?>

$cells_listの中身には下記のようなHTMLが入りました。


<tr>
  <td>りんご</td>
  <td>500円</td>
  <td>長野</td>
</tr>
<tr>
  <td>みかん</td>
  <td>290円</td>
  <td>愛媛</td>
</tr>
<tr>
  <td>納豆</td>
  <td>198円</td>
  <td>茨城</td>
</tr>

テーブルを出力する。

上記で取得したテーブルヘッダー、テーブルセルの２つを<table>タグの中に出力して完成です。


<?php
    echo $this->Html->tag('table',$header_list.$cells_list);
?>

HtmlHelperのtag()を使用し、生成したテーブルヘッダー、テーブルセルを<table>タグで囲い、echoで出力しています。

セルを結合する

セルを結合する方法について見てみます。

テーブルセル<td>を結合する

セルの値に、下記のような配列を指定することでセルに属性をつけることができます。


array('セルの値',array('属性名' => '属性値'))

今回はセルの結合なので、<td>に対し「colspan="2"」をつけて結合させます。下記の例では4行目の2,3列目の<td>が結合されます。


$cells_list = array(
    array('りんご','500円','長野'),
    array('みかん','290円','愛媛'),
    array('納豆','198円','茨城'),
    array('もずく',array('※取り扱ってないです',array('colspan' => '2'))),
);
$cells_list = $this->Html->tableCells(
    $table_cells
);

以下の様なHTMLが生成されました。


<tr>
  <td>りんご</td>
  <td>500円</td>
  <td>長野</td>
</tr>
<tr>
  <td>みかん</td>
  <td>290円</td>
  <td>愛媛</td>
</tr>
<tr>
  <td>納豆</td>
  <td>198円</td>
  <td>茨城</td>
</tr>
<tr>
  <td>もずく</td>
  <td colspan="2">※取り扱ってないです</td>
</tr>

テーブルヘッダーセルの場合

テーブルヘッダーセルの結合についても見てみます。こちらもテーブルセルの時と同様に<th>にcolspan属性を付加し結合します。


$table_headers = array(
    "商品名",
    array("値段とか産地とか"=>array("colspan" => "2")),
);
$tableHeader = $this->Html->tableHeaders(
    $table_headers
);

以下の様なHTMLが生成されます。


<tr>
    <th>商品名</th>
    <th colspan="2">値段とか産地とか</th>
</tr>

※tableHeaders()に対し、セル毎に属性を設定できる機能はバージョン 2.2以降で利用できます。

テーブルヘッダーの<tr><th>に属性をつける

<tr>と<th>にクラス属性をつけてみます。


$header_list = array("商品名","値段","産地");
$header_list = $this->Html->tableHeaders(
    $table_headers,
    array('class' => 'tr_class')),
    array('class' => 'th_class'),
);

第二引数に<tr>につける属性、第三引数に<th>につける属性をそれぞれ指定します。

テーブルセルの奇数行、偶数行に属性をつける

テーブルセルの奇数行の<tr>と偶数行の<tr>にそれぞれクラス属性をつけてみます。


$cells_list = array(
    array('りんご','500円','長野'),
    array('みかん','290円','愛媛'),
    array('納豆','198円','茨城'),
    array('もずく',array('※取り扱ってないです',array('colspan' => '2'))),
);
$cells_list = $this->Html->tableCells(
    $table_cells,
    array('class'=>'odd'), // 奇数列
    array('class'=>'even'), // 偶数列
);

第二引数に奇数行の<tr>につける属性、第三引数に偶数行の<tr>につける属性をそれぞれ指定します。


<tr class="odd"><td>みかん</td> <td>290円</td> <td>愛媛</td></tr>
<tr class="even"><td>納豆</td> <td>198円</td> <td>茨城</td></tr>
<tr class="odd"><td>納豆</td> <td>198円</td> <td>茨城</td></tr>
<tr class="even"><td>もずく</td> <td colspan="2">※取り扱ってないです</td></tr>