商品一覧をtableタグで表示する

商品一覧（画像、商品名、価格）をtableタグを使って表で表示するときに、1列に3個ずつ横に並べて、4個目は2列目の左端にくるようにしたいです。
どのように修正すればいいですか?
1個目・2個目・3個目
4個目・5個目・6個目
・・・
のような感じです。
tableタグ以外は省略しています。

<table>
<?php foreach ($rows as $item) { ?>
<tr>
<td><img src="./product_picture/<?php echo $item['img']; ?>" width=300 height=300></td>
</tr>
<tr>
<td><?php echo $item['name']; ?></td>
</tr>
<tr>
<td><?php echo $item['price']; ?>
<?php if ($item['stock'] > 0) { ?>

<form method="post" action="index_add_cart.php">
<input type="submit" value="カートに追加">
<input type="hidden" name="item_id" value="<?php print($item['id']) ?>">
</form>

<?php } else { ?>
<p class="soldout">申し訳ございません。現在、売り切れです。</p>
<br><input type="radio" name="item_id" value="<?php echo $item['id']; ?>">
</td>
<?php } ?>
</tr>
<?php } ?>
</table>

No.1 回答者： naokita 回答日時： 2021/02/22 12:55

意味が不明なのと、そのtableだけでは無理ですよ。

意味不明というのは、
・商品一覧　→これは商品一覧ではなく商品１つの枠ではないでしょうか。
・○個目　→これは１つの商品枠内にその１つの商品関連画像を６個並べるのでしょうか。それとも、画像は１商品に１個のままで、この商品枠を×６個（各６商品分）を並べるのでしょうか？つまり商品が何個？
・4個目は2列目の左端　→配置図を見る限り１列は２行ですよね？　なので、３列+２行って事かな？　だとすると、４個目は１列目ではなく、２行目の左端・・・
・パソコン画面だと、そのような配置は出来るけど、スマホ画面ではどうなるのでしょうね？・・・
CSSで、floatやflexで配置すれば可能です。大tableでも可能です。

つまり、上記のような質疑応答を経て、ご希望を全て明確にしてから、
（これが設計です）
現在の配置を確認した上で、HTML/PHP/CSSを改良しなければいけません。

おそらく、ショッピングカートのAPS(EC)サービスを利用していると思いますが、
そのHTML/PHP/CSSを編集できるのか？
そこのマニュアルを確認しながら、ご自分で調整出来るかもしれません。

PHPも、希望通りに確実に設定しないと、
同じ１つの商品が、同じ６個も並ぶ事になりますよ・・・


今のその質問だけの情報だと、CSSを
　・ 外枠　width:900px; 以上にして、
　・ table{ width:300px; float:left;}
にすれば、出来るのですが、
実際にこれを設定しても、高確率で失敗するでしょうね・・・
理由は、
その他のtableにも影響するでしょうし、そもそもtable外のHTMLや、CSSの詳細度（優先）がどのような関連になっているか不明なので、３つ並びになるか確証できません。
実際の設定では、HTML/PHP/CSSを検証しながら直接調整しないと、ここだけの質問だけでは無理です！