【HTML】テーブルを表示する方法＆phpで楽をしよう【初心者向け】

今回はhtmlでテーブルを表示してみるということで、単純にhtmlコードを作成するだけじゃつまらないので、phpを使用して楽にテーブルを表示させたいと思います。

こちらで、xamppの設定あれこれがありますので、よろしければご参考に。

テーブルの内容としては、予約表にしてみましょう。
予約表といっても色々ありますが、今回は会議室の予約表にしてみます。

テーブルの表示内容を考える
html+phpで作成したテーブルのサンプルコード
テーブルを表示するコードの解説(html)
テーブルを表示するコードの解説(php)
次の目標

テーブルの表示内容を考える

テーブルを作るにあたり、何を表示させるかを決めます。
今回は会議室ということで、表示内容は下記とします。
縦(列)・・・会議室名称(会議室A、会議室B、会議室C)
横(行)・・・時間(0時～23時)

html+phpで作成したテーブルのサンプルコード

早速ですが、テーブルのサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>予約表</title>
    <style>
    table,tr,td,th{
        border: solid 1px black; border-collapse: collapse;
    }
    td,th{
        min-width: 32px;
    }
    th{
        background: silver;
    }
    </style>
</head>
<body>
    <table>
        <tr>
           <th>時間(時)</th><?php for($i=0;$i<24;$i++) print '<th>'.$i.'</th>'; ?>
        </tr>
        <tr>
           <th>会議室A</th><?php for($i=0;$i<24;$i++) print '<td></td>'; ?>
        </tr>
        <tr>
           <th>会議室B</th><?php for($i=0;$i<24;$i++) print '<td></td>'; ?>
        </tr>
        <tr>
           <th>会議室C</th><?php for($i=0;$i<24;$i++) print '<td></td>'; ?>
        </tr>
    </table>
</body>
</html>

テーブルを表示するコードの解説(html)

19行目と32行目のtableタグの内側に、テーブルの内容を書くことになります。

20行目などでtrタグが出できます。
trは行を表すもので、<tr>と</tr>で囲ったものが1行として扱われます。
(“tableのrow”＝tr)

21行目などでthタグが出できます。
thは行を表すもので、<th>と</th>で囲ったものが見出しとして扱われます。
(“tableのheader”＝th)
※私は固定表示する文字をthにします。

24行目などでtdタグが出できます。
tdはセルのデータを表すもので、<td>と</td>で囲ったものがセルのデータとして扱われます。
(“tableのdata”＝td)

テーブルを表示するコードの解説(php)

21行目などで、0～23までの24回分、print処理をしてthまたはtdを動的に作成・表示させています。

次の目標

今回はざっくりと表示する場所を作りましたので、次は表示させる内容を色々考えるといいかもしれません。
実際に表示内容が決まっても、htmlにベタ書きしてしまうと、会議室を予約するたびにhtmlコードを編集しなくてはいけませんので、phpとデータベースを使って動的に表示させるのが良いでしょう。

あとは、CSSなどで、いい感じにテーブルを装飾しても良いかと思います。