🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

2回答

2229閲覧

商品一覧を表で表示したいです

turtle410

総合スコア13

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2021/02/22 02:19

前提・実現したいこと

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

発生している問題・エラーメッセージ

エラーはありません。

該当のソースコード

PHP

1<?php 2//商品一覧ページ 3session_start(); 4//データベース接続関連 5$host = 'localhost'; //ホスト名 6$username = '968'; //ユーザー名 7$password = '968'; //パスワード 8$dbname = '968'; //データベース名 9$charset = 'utf8'; 10$dsn = 'mysql:dbname='.$dbname.';host='.$host.';charset='.$charset; 11 12if (isset($_SESSION['customer']) === TRUE) { //最初にログインしているかをチェックする。 13 //$user_id = $_SESSION['customer']['id']; 14 $user_name = $_SESSION['customer']['name']; //ログインページから飛んでくる情報 15} 16// if ($_SERVER['REQUEST_METHOD'] === 'POST') { 17 18 try { 19 $dbh = new PDO($dsn, $username, $password, array(PDO::MYSQL_ATTR_INIT_COMMAND => 20 'SET NAMES utf8mb4')); 21 $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 22 $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 23 24 $sql = 'SELECT product.id, name, price, img, status, stock 25 FROM product 26 JOIN item_stock 27 ON product.id = item_stock.stock_id 28 WHERE status = 1'; 29 // ステータスが1の商品のみ表示 30 31 // prepareでSQL文を実行する準備 32 $stmt = $dbh->prepare($sql); 33 // SQLを実行 34 $stmt->execute(); 35 //レコードを取得する 36 $rows = $stmt->fetchALL(); 37 //1行ずつ結果を配列で取得 38 } catch (PDOException $e) { 39 echo '予期せぬエラーが発生しました。管理者へお問い合わせください。理由:'.$e->getMessage(); 40 } 41// } 42?> 43<!DOCTYPE html> 44<html lang="ja"> 45 <head> 46 <meta chartset="UTF-8"> 47 <title>商品一覧</title> 48 <style> 49 .soldout { 50 color: red; 51 font-weight: bold; 52 } 53 </style> 54 </head> 55 56 <body> 57 <h1>商品一覧</h1> 58 59 <p>ようこそ、<?php echo $user_name; ?>さん。</p> 60 <a href="admin.php">商品管理</a> 61 <a href="cart.php">カート</a> 62 <a href="logout.php">ログアウト</a> 63 64 <table> 65<?php foreach ($rows as $item) { ?> 66 <tr> 67 <td><img src="./product_picture/<?php echo $item['img']; ?>" width=300 height=300></td> 68 </tr> 69 <tr> 70 <td><?php echo $item['name']; ?></td> 71 </tr> 72 <tr> 73 <td><?php echo $item['price']; ?> 74<?php if ($item['stock'] > 0) { ?> 75 76 <form method="post" action="index_add_cart.php"> 77 <input type="submit" value="カートに追加"> 78 <input type="hidden" name="item_id" value="<?php print($item['id']) ?>"> 79 </form> 80 81<?php } else { ?> 82 <p class="soldout">申し訳ございません。現在、売り切れです。</p> 83 <br><input type="radio" name="item_id" value="<?php echo $item['id']; ?>"> 84 </td> 85<?php } ?> 86 </tr> 87<?php } ?> 88 </table> 89 </body> 90</html> 91 92 93

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/02/22 02:23

データ数が3の倍数ではないときにあまったセルはどうする予定でしょうか?
m.ts10806

2021/02/22 02:25

回答ついた質問を随分放置されているようなのでそちらをなんとかするのが先では。解決する気ないように見受けられます。
guest

回答2

0

表示した件数をカウントする変数を用意して、
foreach直後でカウントアップさせる。

カウントが3の倍数のとき、
tr閉じ、tr、を出力させる。

foreachループを抜けた後、
件数の最大値が3の倍数でない場合は
閉じtrを出力する。

みたいな感じで。

投稿2021/02/22 04:32

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

PHP

1$count=3; 2$data=[1,2,3,4,5,6,7,8,9,10]; 3$tmp=array_chunk(array_merge($data,array_fill(0,$count*ceil(count($data)/$count)-count($data),"&nbsp;")),$count); 4print_r($tmp);

投稿2021/02/22 02:30

yambejp

総合スコア116661

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問