tableでthとtdの位置がずれる

Question

いつもお世話になっております。

動作環境
jQuwey:jquery-3.3.1.min
Materialize: 1.0.0-beta
PHP7.2.4

以下のコードで書いたtbody,tr,tdをhtml側に埋め込みたいのですが

function showSQL(){
    $dbh = accessSQL();
    $stmt = $dbh->query("SELECT id, code, prod_name, mount, category, end_date from hozon");
    foreach ($stmt as $value) {
        echo "<table>";
        echo "<form name='show' method='post' action='index.php'>";
        echo "<input type='hidden' name='token' value='<?=CsrfValidator::generate()?>\'>";
        echo "<input type='hidden' name='code' value='".$value['id']."'>";
        echo "<tbody>";
        echo "<tr>";
            echo "<td  align='center'>".$value['code']."</td>";
            echo "<td align='center'>".$value['prod_name']."</td>";
            echo "<td align='center'>".$value['mount']."</td>";
            echo "<td align='center'>".$value['category']."</td>";
            echo "<td align='center'>".$value['end_date']."</td>";
            echo "<td><input type='submit' name='del' value='削除' class='btn'></td>";
        echo "<tr>";
        echo "</tbody>";
        echo "</form>";
    }

}

    <table>
        <thead>
            <tr>
                <th>商品コード</th>
                <th>商品名</th>
                <th>数量</th>
                <th>種目</th>
                <th>賞味期限</th>
                <th>ボタン</th>
            </tr>
            <?php showSQL() ?>
        </thead>
    </table>

どうしても、以下のようにテーブルヘッダに沿って縦に綺麗に並びません。

どうしたらテーブルヘッダとテーブルデータをきれいに縦並びにすることが出来るでしょうか？
アドバイスとご教授のほど、よろしくお願いします。

Answer 1

・tbodyの中に、列でループして出力ようにする
・ループ中の「code」〜「end_date」は出力だけみたいなので、formは削除ボタンのセルの中に入れる
・theadとtbodyの列の数がおかしいので揃える
といったところでしょうか。

function showSQL(){
    $dbh = accessSQL();
    $stmt = $dbh->query("SELECT id, code, prod_name, mount, category, end_date from hozon");
    foreach ($stmt as $value) {
        echo "<tr>";
            echo "<td align='center'>".$value['code']."</td>";
            echo "<td align='center'>".$value['prod_name']."</td>";
            echo "<td align='center'>".$value['mount']."</td>";
            echo "<td align='center'>".$value['category']."</td>";
            echo "<td align='center'>".$value['end_date']."</td>";
            echo "<td>";
                echo "<form name='show' method='post' action='index.php'>";
                    echo "<input type='hidden' name='token' value='<?=CsrfValidator::generate()?>\'>";
                    echo "<input type='hidden' name='code' value='".$value['id']."'>";
                    echo "<input type='submit' name='del' value='削除' class='btn'>"
                echo "</form>";
            echo "</td>";
        echo "<tr>";
    }
}

    <table>
        <thead>
            <tr>
                <th>商品コード</th>
                <th>商品名</th>
                <th>数量</th>
                <th>種目</th>
                <th>賞味期限</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>;
        <?php showSQL() ?>
        </tbody>
    </table>

Comments

[kalon]

素早く的確、かつご丁寧にコードまで添削してくださり、ありがとうございます。

Answer 2

デベロッパーツールで確認すると分かると思いますが、tableもループしているので
ループごとに毎回tableを作ってしまっています。
まず、tableを外にだすこと、そして閉じタグに注意して下さい。

unction showSQL(){
    $dbh = accessSQL();
    $stmt = $dbh->query("SELECT id, code, prod_name, mount, category, end_date from hozon");
        echo "<form name='show' method='post' action='index.php'>";//formは外側に
        echo "<tbody>";//tbodyもforeachの外に出す
    foreach ($stmt as $value) {
        echo "<input type='hidden' name='token' value='<?=CsrfValidator::generate()?>\'>";
        echo "<input type='hidden' name='code' value='".$value['id']."'>";
        echo "<tr>";
            echo "<td  align='center'>".$value['code']."</td>";
            echo "<td align='center'>".$value['prod_name']."</td>";
            echo "<td align='center'>".$value['mount']."</td>";
            echo "<td align='center'>".$value['category']."</td>";
            echo "<td align='center'>".$value['end_date']."</td>";
            echo "<td><input type='submit' name='del' value='削除' class='btn'></td>";
        echo "<tr>";
    }
        echo "</tbody>";//tbodyもforeachの外に出す
        echo "</form>";//formは外側に

}

追記

よく見たらtableの書き方も不思議なので修正が必要ですね。
thead内でループさせるのではなく、theadの後にして、
ループはtableを出力せずにtbodyの中身だけで良いでしょう。

    <table>
        <thead>
            <tr>
                <th>商品コード</th>
                <th>商品名</th>
                <th>数量</th>
                <th>種目</th>
                <th>賞味期限</th>
                <th>ボタン</th>
            </tr>
        </thead>
        <?php showSQL() ?>
    </table>

Comments

[namimon]

見た感じ、tdの中にformを入れた方がよさそうな気がします

[kalon]

お返事ありがとうございます。その通りでした。

Answer 3

thが5個でtdが6個となっています。
中が空でも良いので数を合わせられては？

Comments

[kalon]

ご指摘のほどありがとうございます。ボタンというテーブルヘッダを追加してみましたが、結果は変わりませんでした。上記質問のコードも更新いたしました。

[m.ts10806]

ああ・・そうですね。
stampdoorさんの回答で気づきましたがtableを何個も作ってしまってますね。
数をあわせた上でshowSQL()の <table>を出力している部分を取り除けば良いですね。

[m.ts10806]

最終的にブラウザには指定したhtmlなのでブラウザの「ソースを表示」できちんと想定通りの形になっているか確認しつつ調整すると良いです。
特にサーバー側の言語とCSSフレームワークなどを連携させる場合は必要な指定を盛り込みつつHTML出力しなければならないので、今回のようにずれることはよくあります。

[kalon]

よくあることなんですね。ご指導のほどありがとうございます。

[m.ts10806]

よくあることというか、CSSフレームワークって結構自動でhtmlを生成して動作しているので、
その部分は結局動かしてみないと分からない部分なんですよね。
使う側が動的にhtml生成しているときなんか特に（割と最近苦しんだのでお気持ち良く分かります）