HTMLで表を作ろう！基本の<table>タグをマスターしよう

Webページでデータを整理して表示したいときには、表（テーブル）を使います。表を使うと、情報を見やすくまとめることができます。
HTMLでは、<table>タグを使って表を作ります。この記事では、基本的な表の作り方を初心者向けに解説します！

1. HTMLの表の基本構造

   HTMLの表は、次のような構造になります。

   		<table>
   			<tr>
   				<th>名前</th>
   				<th>年齢</th>
   				<th>出身地</th>
   			</tr>
   			<tr>
   				<td>田中 太郎</td>
   				<td>25</td>
   				<td>東京</td>
   			</tr>
   			<tr>
   				<td>佐藤 花子</td>
   				<td>30</td>
   				<td>大阪</td>
   			</tr>
   		</table>
   		

表示結果



---

2. 各タグの役割

   タグ	役割
   <table>	表全体を囲むタグ
   <tr>	行（横方向）を作るタグ
   <th>	見出しセル（太字 & 中央寄せ）
   <td>	データセル（表の中の普通のセル）

   表は「行」（<tr>）と「セル」（<th> や <td>）で構成されています。

   • <th> は見出しを作るときに使います。
   • <td> は表の中のデータを入れるときに使います。

---

3. 表に枠線をつける

   デフォルトでは表の枠線が表示されません。枠線をつけるには、CSSで border を指定します。

   			table {
   				border-collapse: collapse;
   			}
   			th, td {
   				border: 1px solid black;
   				padding: 8px;
   			}
   		

   			<table>
   				<tr>
   					<th>商品名</th>
   					<th>価格</th>
   					<th>在庫</th>
   				</tr>
   				<tr>
   					<td>りんご</td>
   					<td>100円</td>
   					<td>20個</td>
   				</tr>
   				<tr>
   					<td>みかん</td>
   					<td>80円</td>
   					<td>15個</td>
   				</tr>
   			</table>
   		

   表示結果

   

   このように、CSSで border を設定すると、表に枠線をつけることができます。

   CSSの説明

   border-collapse: collapse; は、テーブルのセルの境界線（border）が重なった場合に、それらを1本の線として表示させるために使用します。

   border: 1px solid black; は、CSSで要素に境界線（ボーダー）を設定するためのショートハンドプロパティです。このプロパティは、要素の周りに1px（ピクセル）幅の黒い実線の境界線を追加します。

   このプロパティは以下の3つの部分で構成されています：
   1. 1px: 境界線の幅を指定します。ここでは「1px」と指定しているので、境界線の幅は1ピクセルになります。
   2. solid: 境界線の種類を指定します。「solid」は実線を意味します。他にも「dashed」や「dotted」などの種類があります。
   3. black: 境界線の色を指定します。ここでは「black」で黒色の境界線になります。色名やカラーコード（例：#000000）を使うことができます。

まとめ

• <table>：表全体を囲むタグ
• <tr>：行（横方向）を作るタグ
• <th>：見出しセル（太字 & 中央寄せ）
• <td>：データセル（表の中の普通のセル）
• CSS の border を使うと枠線をつけられる

HTMLの表を使えば、データをわかりやすく整理できます！ぜひ、実際に試してみてくださいね