商品一覧の表がずれてしまいます

前提・実現したいこと

商品の一覧ページから商品の詳細ページ（detail.php）に進めるようにしています。
商品の一覧をブラウザで表示すると表がずれてしまいます。
価格のところが空白になり、商品番号と商品名が縦に出力されます。
どの部分を修正すればいいですか？

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

エラーメッセージ

該当のソースコード

PHP
1<?php
2$err_msg          = [];  // エラーメッセージの格納先
3
4//データベース接続関連
5$host     = 'localhost';      //ホスト名
6$username = '4983321';  //ユーザー名
7$password = '4983321';  //パスワード
8$dbname   = '4983321';  //データベース名
9$charset  = 'utf8';
10$dsn      = 'mysql:dbname='.$dbname.';host='.$host.';charset='.$charset;
11
12$dbh = new PDO($dsn, $username, $password, array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8mb4'));
13$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
14$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
15echo 'データベースに接続しました';
16
17if ($_SERVER['REQUEST_METHOD'] === 'POST') {
18    if (isset($_POST['keyword']) === TRUE) { 
19        $keyword = $_POST['keyword'];
20        try {   //select * from ... と書かない。*は使わない
21            $sql = 'SELECT id, name, price
22                    FROM product 
23                    WHERE name like ?';
24            // prepareでSQL文を実行する準備
25            $stmt = $dbh->prepare($sql);
26            $stmt->bindValue(1, $keyword,  PDO::PARAM_STR);  //文字列なのでSTRにかえる
27            // SQLを実行
28            $stmt->execute(['%' . $keyword. '%']);
29        } catch (PDOException $e) {
30          echo '接続できませんでした。理由：'.$e->getMessage();
31        }
32    } else {
33        try {   //リクエストパラメータに検索キーワードが含まれていないときは商品の一覧を表示する
34            $sql = 'SELECT id, name, price
35                    FROM product ';
36            // prepareでSQL文を実行する準備
37            $stmt = $dbh->prepare($sql);
38            // SQLを実行
39            $stmt->execute([]);
40        } catch (PDOException $e) {
41          echo '接続できませんでした。理由：'.$e->getMessage();
42        }
43    }
44}
45
46    echo '<table border="2">';
47    echo '<th>商品番号</th> <th>商品名</th> <th>価格</th>';
48    foreach ($stmt as $row) {  //$sqlに変更する？
49        $id = $row['id'];
50        echo '<tr>';
51        echo '<td>' .  $id . '</td>';
52        echo '</tr>';
53        echo '<td>';
54        echo '<a href="detail.php?id='. $id . '">' . $row['name'] . '</a>';
55        echo '</td>';
56        echo '<td>' . $row['price'] . '</td>';
57        echo '</tr>';
58    }
59    echo '</table>';
60?>
61<!DOCTYPE html>
62<html lang ="ja">
63<head>
64   <meta charset ="UTF-8">
65   <title>商品一覧</title>
66</head>
67<body>
68   <h1>商品一覧</h1>
69   <form action="product.php" method="post">
70       商品検索
71       <input type="text" name="keyword">
72       <input type="submit" name="submit" value="検索">
73   </form>
74   <hr>
75</body>
76</html>
77
78<!--
79商品の詳細情報を表示するページからカートに商品を追加する
80商品テーブルに登録されている商品を検索する機能もある-->

試したこと

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

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

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

行動規範の内容に同意します

回答2件

どの部分を修正すればいいですか？

まず、開発の仕方。
動的にHTMLを出力する場合、完成イメージのHTMLを先に作成して（「モック」と言います）
その形を目指すこと。

処理の中にHTMLを組み込むのも楽になります。

でないと「どういうHTMLを想定して、どう違うのかズレているのか」が誰にもわからないので、
「どう修正したらいいか」も想像による補完を強いられることになります。

なので、想像による補完した感じだと

<th>商品番号</th> <th>商品名</th> <th>価格</th>
というところから「3列のテーブルを作りたい」と推察されますので

<td></td>の組み合わせも３つ必要になる、と推察されます。となると、完成予想図はこう ```html <table border="2"> <tr> <th>商品番号</th> <th>商品名</th> <th>価格</th> </tr> <tr> <td>商品番号1</td> <td>商品名1</td> <td>価格1</td> </tr> <tr> <td>商品番号2</td> <td>商品名2</td> <td>価格2</td> </tr> <tr> <td>商品番号3</td> <td>商品名3</td> <td>価格3</td> </tr> </table> ```

この完成図に対して出力されたHTMLで「不要なもの」「不足しているもの」をあてはめていけば自然と解決するはずです。
つまり、完成図を作ってからコードを組めば間違いは減るということ。

蛇足：

<body>の内じゃないのに出力しては正しく動くものも動かなくなる可能性があります（結局ブラウザがうまくやってくれてるだけ。HTML文法としては不正）

投稿2021/02/13 08:00

編集2021/02/13 08:00