質問をすることでしか得られない、回答やアドバイスがある。

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

ただいまの
回答率

90.83%

  • PHP

    18202questions

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

  • HTML

    7788questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4968questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 114

kalon

score 76

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

動作環境
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>

どうしても、以下のようにテーブルヘッダに沿って縦に綺麗に並びません。
イメージ説明
どうしたらテーブルヘッダとテーブルデータをきれいに縦並びにすることが出来るでしょうか?
アドバイスとご教授のほど、よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

・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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/26 17:12

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

    キャンセル

+3

デベロッパーツールで確認すると分かると思いますが、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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/26 16:51

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

    キャンセル

  • 2018/04/26 17:13

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/26 16:41

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

    キャンセル

  • 2018/04/26 16:43

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

    キャンセル

  • 2018/04/26 16:47

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

    キャンセル

  • 2018/04/26 17:11

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

    キャンセル

  • 2018/04/26 17:12

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

    キャンセル

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

  • ただいまの回答率 90.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    name属性のつけかた

    超初歩的かと思うのですが、、、 <td><?= echo h($row['name']); ?></td> 上記のようにデータベースからnameを引っ張ってくるという感じ

  • 解決済

    idに別名みたいなものをつけることはできないか

    とあるサイトの更新ページを作っています。 下記の画像のように削除するをクリックすると delete_skills.php?id=xxxに飛ぶようになってます。 <a 

  • 解決済

    動的にレコードを更新するプログラムにおいて、レコードを更新するパートができない

    動的にレコードを更新するプログラムをつくっています。 update2のボタンを押してレコードを選択すると、名前や値段を入力するフォームが表示され、それに入力すればレコードを更新で

  • 解決済

    foreachでtableを作る。

    foreachを使用して、下記のようなtableを作成するコードは どのようなコードになりますか? ※地域や日時、イベント名などはDBから引っ張ってきます。 今回

  • 解決済

    POSTメゾットを使って「削除」を行う方法

    前提・実現したいこと PHPで従業員管理画面をつくっています。 従業員のデータ削除機能がGETメゾットで作られているので、 これをPOSTメゾットを使ってコードを書き直したいと考え

  • 解決済

    PHP MySQL の連携

    PHPのWEBサイトで名前、年齢を登録ボタンを押すとMYSQLのテーブルに格納させる設定方法を教えて下さい。(レンタルサーバで各ソフトはインストールしています。)  PHPとMYS

  • 受付中

    Noticeエラーの対処法

    Notice: Undefined property: stdClass::$users in /home/vagrant/hoge/public_html/admin/reser

  • 解決済

    PHPで検索機能を作成していますが、NULLになります。

    PHPで検索機能を作成しています。 あいまい検索で検索できるようにしていますが、下記の画像のように検索フォームから→検索結果画面を見るとNULLになってしまいます。 本当は、キ

同じタグがついた質問を見る

  • PHP

    18202questions

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

  • HTML

    7788questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4968questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。