HTML テーブル

テーブルは実際には多くの小さなセルで構成されており、これらのセルは並行して配置されています。これらの行と列からなるレイアウトがテーブルと呼ばれ、テーブルは table タグで定義されます。

HTMLテーブルの例:

オンラインサンプル

HTMLテーブル
このサンプルでは、HTMLドキュメント内にテーブルを作成する方法を示します。

<table　border="1"　width="300">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

HTML テーブル

テーブルは <table> タグで定義されます。各テーブルには行（<tr> タグで定義）があり、各行はセル（<td> タグで定義）に分割されます。td はテーブルデータ（table data）を意味し、データセルの内容です。データセルにはテキスト、画像、リスト、パラグラフ、フォーム、水平線、テーブルなどが含まれることがあります。

テーブルの例

<table　border="1">
　　　　<tr>
　　　　　　　　<td>行　1,　列　1</td>
　　　　　　　　<td>行　1,　列　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>行　2,　列　1</td>
　　　　　　　　<td>行　2,　列　2</td>
　　　　</tr>
</table>

ブラウザ上で以下のように表示されます：:

HTMLテーブルと枠線属性

枠線属性を定義しないと、テーブルに枠線は表示されません。これは時には便利ですが、多くの場合、枠線を表示したいです。

枠線属性を使って枠線付きのテーブルを表示します：

<table　border="1">
　　　　<tr>
　　　　　　　　<td>行　1,　列　1</td>
　　　　　　　　<td>行　1,　列　2</td>
　　　　</tr>
</table>

HTMLテーブルヘッダー

テーブルのヘッダーは <th> タグで定義されます。

ほとんどのブラウザでは、ヘッダーを太字で中央に表示します：

<table　border="1">
　　　　<tr>
　　　　　　　　<th>表頭一</th>
　　　　　　　　<th>表頭二</th>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>行　1,　列　1</td>
　　　　　　　　<td>行　1,　列　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>行　2,　列　1</td>
　　　　　　　　<td>行　2,　列　2</td>
　　　　</tr>
</table>

ブラウザ上で以下のように表示されます：

他の例

枠線のないテーブル
枠線のないテーブルのサンプルを示します。

テーブルのヘッダー（Heading）
この例では、テーブルのヘッダーを表示する方法を示します。

タイトル付きのテーブル
タイトル（caption）付きのテーブルのサンプルを示します。

行や列をまたぐテーブルセル
このサンプルでは、行や列をまたぐテーブルセルの定義方法を示します。

テーブル内のタグ
このサンプルでは、異なる要素内に要素を表示する方法を示します。

セルパディング（Cell padding）
このサンプルでは、セルパディングを使ってセルの内容と枠線の間にスペースを作成する方法を示します。

セルスペース（Cell spacing）
このサンプルでは、セルスペースを使ってセル間の距離を増やす方法を示します。

HTMLテーブルタグ