TABLEで表示する時に、一定の個数で列を増やす

質問

こんにちは、お世話になります。

早速ですが、質問がございます。

下記のようなコードを使用して、商品のデーターを呼び出し
tableで表示させているのですが、
商品のデーターを15個表示させる指定をした場合に、
横に15個全てが並んでしまいます。

これを、5個毎に段を増やして、
2段目、3段目と表示させることは可能でしょうか？

何か良い方法がございましたら
ご教授をお願いいたします。

それでは、何卒よろしくお願いいたします。

<table>
<tr>
<? for ($i = 0; $i < intval($xml->CurrentCount); $i++) { ?>
<? $item = $xml->Goods[$i] ?>
<? $size = calcImageSize($item->width, $item->height) ?>
<td><a href="<?=$item->LinkCode?>"><img src="<?=$item->ImageUrl?>" width="100" height="140" alt="<?=mb_convert_encoding($item->GoodsName, "SJIS","UTF-8")?>" /></a><br /><span class="red"><?='￥'.number_format($item->Price)?></span></td>
<? } ?>
</tr>
</table>

回答No.2

himajin100000

gooの仕様(か、OKWaveの仕様で【回答上でリンクになっている文字列に続けて不可視な文字が含まれる】から取り除いてね。
ソースコードは、ある程度力があれば自力で理解できるはずなので解説はしない。そこまでの勉強は自分でやるべきだと思っている。

==================Q5420571-1.php(書いたPHPのコード)=================

<?php
/*
.NETでいう、
System.Func<Array<T>,int,bool,T,Array<T>>
にして、中にDOMに関するコードをかかないことで、DOMへの依存性を下げた。
*/
function distribute($src,$n,$fillflag,$absent){
$dest = array();
while(count($src) > 0){

$temp = array();
for($i = 0;$i < $n; $i++){

array_push($temp,$src[0]);

array_splice($src,0,1);

if(count($src) == 0){
while(($fillflag == true) && (count($temp) < $n)){
array_push($temp,$absent);
}
break;
}

}
array_push($dest,$temp);
}
return $dest;
}

function init(){

$xhtmlns = "http://www.w3.org/1999/xhtml";

/* 勝手にSimpleXMLと予想。ちゃんとこういうのは書きましょう */
$xml = simplexml_load_file("Q5420571-1.xml");

$num = 5;
$items = distribute($xml->xpath("Goods"),$num,true,null);

/* 個人的にSimpleXMLは好きじゃないのでDOMでいく。*/

$impl = new DOMImplementation();

/*
貧民的プログラミングの発想をしないように！
http://takagi-hiromitsu.jp/diary/20051227.html#p02
*/

/* DOCTYPE宣言と一致するとlibxmlはmeta要素を頼みもしないのに勝手に挿入しやがります。*/
$doctype = $impl->createDocumentType(
"html",
"-//W3C//DTD XHTML 1.0 Strict//EN",
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
);
$doc = $impl->createDocument($xhtmlns,"html",$doctype);

$head = $doc->createElementNS($xhtmlns, "head");

$title = $doc->createElementNS($xhtmlns, "title");
$title->appendChild($doc->createTextNode("テスト"));

$link = $doc->createElementNS($xhtmlns, "link");
$link->setAttribute("rel" ,"stylesheet");
$link->setAttribute("type" , "text/css");
$link->setAttribute("href","Q5420571-1.css");
$head->appendChild($title);

$body = $doc->createElementNS($xhtmlns, "body");

$table = $doc->createElementNS($xhtmlns, "table");
$tbody = $doc->createElementNS($xhtmlns, "tbody");
for ($i = 0;$i < count($items);$i++){
$tr = $doc->createElementNS($xhtmlns, "tr");

/* thが必要な場合は自分でコードを考えてね */
for ($j = 0;$j < $num;$j++){

$td = $doc->createElementNS($xhtmlns, "td");
if (!is_null($items[$i][$j])){
$a = $doc->createElementNS($xhtmlns, "a");
$a->setAttribute("href",(string)($items[$i][$j]->LinkCode));

$td->appendChild($a);

$img = $doc->createElementNS($xhtmlns, "img");
$img->setAttribute("src",(string)($items[$i][$j]->ImageUrl));
$img->setAttribute("alt",(string)($items[$i][$j]->GoodsName));
$img->setAttribute("width","100");
$img->setAttribute("height","140");

$td->appendChild($img);

/* 俺が嫌いなのでbr要素は使わない */
/*
classにredとか入っているの嫌いなので
代わりにpriceを付けた。CSSもこれにあわせてあるので注意
*/
$span = $doc->createElementNS($xhtmlns, "span");
$span->setAttribute("class","price");
$span->appendChild($doc->createTextNode(number_format(doubleval((string)($items[$i][$j]->Price)))));

$td->appendChild($span);

}
$tr->appendChild($td);
}
$tbody->appendChild($tr);
}
$table->appendChild($tbody);

$body->appendChild($table);

$doc->documentElement->appendChild($head);
$doc->documentElement->appendChild($body);
$doc->encoding = "Shift_JIS";
$doc->formatOutput = true;

/* 必要に応じてここは変える */
header("Content-Type:application/xhtml+xml");

print($doc->saveXML());

}

init();

?>
============Q5420571-1.xml同じディレクトリにあるXMLファイル===============

<?xml version="1.0" encoding="UTF-8"?>
<a>
<Goods>
<width>16</width>
<height>16</height>
<GoodsName>Goolge Favicon</GoodsName>
<LinkCode>http://www.google.co.jp/</LinkCode>
<ImageUrl>http://www.google.co.jp/favicon.ico</ImageUrl>
<Price>1500</Price>
</Goods>
<Goods>
<width>242</width>
<height>95</height>
<GoodsName>OKWave バナー</GoodsName>
<LinkCode>http://okwave.jp/</LinkCode>
<ImageUrl>http://service.okwave.jp/okwave_com/images/logo_top.gif</ImageUrl>
<Price>740</Price>
</Goods>
<Goods>
<width>16</width>
<height>16</height>
<GoodsName>Goolge Favicon</GoodsName>
<LinkCode>http://www.google.co.jp/</LinkCode>
<ImageUrl>http://www.google.co.jp/favicon.ico</ImageUrl>
<Price>300</Price>
</Goods>
<Goods>
<width>242</width>
<height>95</height>
<GoodsName>OKWave バナー</GoodsName>
<LinkCode>http://okwave.jp/</LinkCode>
<ImageUrl>http://service.okwave.jp/okwave_com/images/logo_top.gif</ImageUrl>
<Price>4300</Price>
</Goods>
<Goods>
<width>16</width>
<height>16</height>
<GoodsName>Goolge Favicon</GoodsName>
<LinkCode>http://www.google.co.jp/</LinkCode>
<ImageUrl>http://www.google.co.jp/favicon.ico</ImageUrl>
<Price>650</Price>
</Goods>
<Goods>
<width>242</width>
<height>95</height>
<GoodsName>OKWave バナー</GoodsName>
<LinkCode>http://okwave.jp/</LinkCode>
<ImageUrl>http://service.okwave.jp/okwave_com/images/logo_top.gif</ImageUrl>
<Price>700</Price>
</Goods>
<Goods>
<width>16</width>
<height>16</height>
<GoodsName>Goolge Favicon</GoodsName>
<LinkCode>http://www.google.co.jp/</LinkCode>
<ImageUrl>http://www.google.co.jp/favicon.ico</ImageUrl>
<Price>1500</Price>
</Goods>
<Goods>
<width>242</width>
<height>95</height>
<GoodsName>OKWave バナー</GoodsName>
<LinkCode>http://okwave.jp/</LinkCode>
<ImageUrl>http://service.okwave.jp/okwave_com/images/logo_top.gif</ImageUrl>
<Price>740</Price>
</Goods>
<Goods>
<width>16</width>
<height>16</height>
<GoodsName>Goolge Favicon</GoodsName>
<LinkCode>http://www.google.co.jp/</LinkCode>
<ImageUrl>http://www.google.co.jp/favicon.ico</ImageUrl>
<Price>300</Price>
</Goods>
<Goods>
<width>242</width>
<height>95</height>
<GoodsName>OKWave バナー</GoodsName>
<LinkCode>http://okwave.jp/</LinkCode>
<ImageUrl>http://service.okwave.jp/okwave_com/images/logo_top.gif</ImageUrl>
<Price>4300</Price>
</Goods>
<Goods>
<width>16</width>
<height>16</height>
<GoodsName>Goolge Favicon</GoodsName>
<LinkCode>http://www.google.co.jp/</LinkCode>
<ImageUrl>http://www.google.co.jp/favicon.ico</ImageUrl>
<Price>650</Price>
</Goods>
<Goods>
<width>242</width>
<height>95</height>
<GoodsName>OKWave バナー</GoodsName>
<LinkCode>http://okwave.jp/</LinkCode>
<ImageUrl>http://service.okwave.jp/okwave_com/images/logo_top.gif</ImageUrl>
<Price>700</Price>
</Goods>
</a>

===================Q5420571-1.css(同じディレクトリにあるCSSファイル)=================

@charset "UTF-8";
@namespace "http://www.w3.org/1999/xhtml";

span.price{
color:red;
}
==================出力結果(ソース)=====================================
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>テスト</title>
<link rel="stylesheet" type="text/css" href="Q5420571-1.css" />
</head>
<body>
<table>

<tbody>
<tr>
<td>
<a href="http://www.google.co.jp/"></a>
<img src="http://www.google.co.jp/favicon.ico" alt="Goolge Favicon" width="100" height="140" />
<span class="price">1,500</span>
</td>
<td>

<a href="http://okwave.jp/"></a>
<img src="http://service.okwave.jp/okwave_com/images/logo_top.gif" alt="OKWave バナー" width="100" height="140" />
<span class="price">740</span>
</td>
<td>
<a href="http://www.google.co.jp/"></a>
<img src="http://www.google.co.jp/favicon.ico" alt="Goolge Favicon" width="100" height="140" />
<span class="price">300</span>

</td>
<td>
<a href="http://okwave.jp/"></a>
<img src="http://service.okwave.jp/okwave_com/images/logo_top.gif" alt="OKWave バナー" width="100" height="140" />
<span class="price">4,300</span>
</td>
<td>
<a href="http://www.google.co.jp/"></a>

<img src="http://www.google.co.jp/favicon.ico" alt="Goolge Favicon" width="100" height="140" />
<span class="price">650</span>
</td>
</tr>
<tr>
<td>
<a href="http://okwave.jp/"></a>
<img src="http://service.okwave.jp/okwave_com/images/logo_top.gif" alt="OKWave バナー" width="100" height="140" />

<span class="price">700</span>
</td>
<td>
<a href="http://www.google.co.jp/"></a>
<img src="http://www.google.co.jp/favicon.ico" alt="Goolge Favicon" width="100" height="140" />
<span class="price">1,500</span>
</td>
<td>

<a href="http://okwave.jp/"></a>
<img src="http://service.okwave.jp/okwave_com/images/logo_top.gif" alt="OKWave バナー" width="100" height="140" />
<span class="price">740</span>
</td>
<td>
<a href="http://www.google.co.jp/"></a>
<img src="http://www.google.co.jp/favicon.ico" alt="Goolge Favicon" width="100" height="140" />
<span class="price">300</span>

</td>
<td>
<a href="http://okwave.jp/"></a>
<img src="http://service.okwave.jp/okwave_com/images/logo_top.gif" alt="OKWave バナー" width="100" height="140" />
<span class="price">4,300</span>
</td>
</tr>
<tr>

<td>
<a href="http://www.google.co.jp/"></a>
<img src="http://www.google.co.jp/favicon.ico" alt="Goolge Favicon" width="100" height="140" />
<span class="price">650</span>
</td>
<td>
<a href="http://okwave.jp/"></a>
<img src="http://service.okwave.jp/okwave_com/images/logo_top.gif" alt="OKWave バナー" width="100" height="140" />

<span class="price">700</span>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

</body>
</html>

補足

こんにちは。
この度は、大変ご丁寧にありがとうございました！

上記のコードを参考に、
色々試行錯誤してみたのですが、上手くいきませんでした。

ちなみに、現在使用しているプログラムの全体は
下記のようになっております。

==================index.php=================

<?

/*
* created by interspace
* AccessTrade Webサービスサンプル PHP版
*
* version 1.0 2006/09/12
* version 1.01 2006/10/23
* version 1.10 2009/03/12 :SimpleXML関数対応
* pager部分をクリックした際に、カテゴリが引き継げなくなるのを修正
*/

require_once 'config.inc.php';
define('WS_TYPE', 'searchgoods');
define('BASE_QUERY', '?ws_ver='.WS_VER.'&ws_id='.WS_ID.'&ws_type='.WS_TYPE);

if (isset($_REQUEST['search'])) {

$resource = ATWS_URL.BASE_QUERY;
$resource .= '&row='.$_REQUEST['row'];
$resource .= '&page='.$_REQUEST['page'];
$resource .= '&category1='.$_REQUEST['category'];
$resource .= '&shop='.$_REQUEST['shop'];
$resource .= '&sort1='.$_REQUEST['sort1'];
$resource .= '&sort2='.$_REQUEST['sort2'];
$resource .= '&sort3='.$_REQUEST['sort3'];

$resource .= '&search='.urlencode(mb_convert_encoding($_REQUEST['keyword'], XML_ENCODE, ENCODE));

$xml = simplexml_load_file( $resource );

$data = $_REQUEST;

}
else {
$data['row'] = '10';
$data['category'] = '';
}
?>
<? if (isset($_REQUEST['search'])) { ?>

<? if ($xml->ErrorMsg != '') { ?>
<?=$xml->ErrorCode?><?=$xml->ErrorMsg?>
<? } elseif (intval($xml->CurrentCount) == 0) { ?>

<? } else { ?>

<table>
<tr>
<? for ($i = 0; $i < intval($xml->CurrentCount); $i++) { ?>
<? $item = $xml->Goods[$i] ?>
<? $size = calcImageSize($item->width, $item->height) ?>
<td><a href="http://a.at.ser.tagreco.com/?to=<?=$item->LinkCode?>" rel="nofollow"><img src="<?=$item->ImageUrl?>" width="100" height="140" alt="<?=mb_convert_encoding($item->GoodsName, "SJIS","UTF-8")?>" /></a><br /><span class="red"><?='￥'.number_format($item->Price)?></span></td>
<? } ?>
</tr>
</table>
<? } ?>
<? } ?>

<?

//-- functions --

//画像の表示サイズを計算する
function calcImageSize($width, $height)
{

return $array;
}

?>

-------------ここまで------------

このファイルに、下記のようなパラメーターを追加して
商品のデーターを呼び出しています。

index.php?ws_ver=1&ws_id=91C8DA5665488CFDBF7132938F8956D5198793&ws_type=searchgoods&search=1&row=5&category=600,700,1300&sort1=5&sort2=12&sort3=11&shop=31054&

(例)
http://www.apacolle.jp/web/index.php?ws_ver=1&ws_id=91C8DA5665488CFDBF7132938F8956D5198793&ws_type=searchgoods&search=1&category=600,700,1300&sort1=5&sort2=12&sort3=11&shop=31054&

下記の表のループというのも見つけましたが、
これを実際にどう追加して良いのか分かりませんでした。
http://www.phppro.jp/qa/1532

大変恐れ入りますが、再度ご教授いただけますと幸いです。

それでは、何卒よろしくお願いいたします。

回答No.1

UmJammer

適宜 </tr><tr> を出力するだけですね。

補足

こんにちは。

この度はご回答ありがとうございます！

>>適宜 </tr><tr> を出力するだけですね。

具体的な方法を教えて頂けないでしょうか？

それでは、何卒よろしくお願いいたします。