【6日でできるPHP入門】HTMLのテーブル

　Webページで複数のデータを一覧表示したいときに役立つのが「HTMLのテーブル」です。テーブルはデータを行（レコード）と列（カラム）で整理し、ユーザーに分かりやすく情報を伝えることができます。この記事では、HTMLのテーブルタグの使い方と、商品一覧を例としたテーブル作成の手順を解説します。

１．テーブルの基本構造

1.1. テーブルとは何か

テーブルとは「表」のことです。HTMLで表を作る際は、複数のタグを組み合わせます。
テーブルの行は「」、列（セル）は「」や「」を使い、それぞれのマス目にデータを配置します。

テーブル構造例

商品名	価格	在庫数	発売日
ノートパソコン	120,000円	10	2024-04-01
マウス	2,500円	35	2023-12-15
キーボード	5,000円	18	2024-02-10

行（レコード）：データのまとまり（例：1行=1つの商品）
列（カラム）：データの種類（商品名・価格など）
セル：各データのマス目

1.2. テーブル作成に必要なタグ一覧

タグ	役割
<table>	テーブル全体を囲む
<tr>	行（レコード）を表す
<th>	見出しセル（ヘッダー）
<td>	データセル（内容を記述）

２．商品一覧テーブルのサンプル

2.1. HTMLで作る商品一覧テーブル

ファイル名： lesson41_1.html

<!DOCTYPE html>
<html>
<head>
  <title>商品一覧テーブルのサンプル</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>商品一覧テーブルのサンプル</h1>
  <table border="1" style="border-collapse:collapse">
    <tr>
      <th>商品名</th><th>価格</th><th>在庫数</th><th>発売日</th>
    </tr>
    <tr>
      <td>ノートパソコン</td><td>120,000円</td><td>10</td><td>2024-04-01</td>
    </tr>
    <tr>
      <td>マウス</td><td>2,500円</td><td>35</td><td>2023-12-15</td>
    </tr>
    <tr>
      <td>キーボード</td><td>5,000円</td><td>18</td><td>2024-02-10</td>
    </tr>
  </table>
</body>
</html>

表示結果

2.2. テーブル構成のポイント

<th>はヘッダー（見出し）用。各カラム名（項目名）を表す。
<td>はデータセル。個々の商品情報を格納する。
<tr>は1つの商品の情報（行）を表す。
<table>で全体を囲う。

３．テーブルのデザインを調整する

3.1. 主な属性

属性名	意味・用途
border	テーブルの枠線の太さを指定する。
style	CSSによるデザイン指定
border-collapse	枠線を1本線にする（おすすめ）

例：枠線とCSSの指定

<table border="1" style="border-collapse:collapse">

3.2. デザイン例の応用

セルの色や文字の太さなどもstyle属性でカスタマイズできます。
興味があればさらにデザインを工夫してみてください。

４．PHPで動的にテーブルを作る

4.1. PHP配列とループを使った例

ファイル名： lesson41_2.php

<?php
$products = [
    ["商品名"=>"ノートパソコン", "価格"=>"120,000円", "在庫数"=>10, "発売日"=>"2024-04-01"],
    ["商品名"=>"マウス", "価格"=>"2,500円", "在庫数"=>35, "発売日"=>"2023-12-15"],
    ["商品名"=>"キーボード", "価格"=>"5,000円", "在庫数"=>18, "発売日"=>"2024-02-10"]
];

echo "<table border='1' style='border-collapse:collapse'>";
echo "<tr><th>商品名</th><th>価格</th><th>在庫数</th><th>発売日</th></tr>";
foreach ($products as $p) {
    echo "<tr>";
    echo "<td>{$p['商品名']}</td><td>{$p['価格']}</td><td>{$p['在庫数']}</td><td>{$p['発売日']}</td>";
    echo "</tr>";
}
echo "</table>";
?>

実行結果

まとめ

HTMLテーブルは、データを分かりやすく一覧表示するのに便利です。
<table>, <tr>, <th>, <td>タグを正しく使いましょう。
PHPと組み合わせれば動的なデータ表示も可能です。

次のステップとして、テーブルのデザインやPHPでの出力も試してみてください。