HTML テーブル
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>
以下のようにブラウザで表示されます：
| 行 1、セル 1 | 行 1、セル 2 |
| 行 2、セル 1 | 行 2、セル 2 |
テーブルと枠線属性
枠線属性を定義しないと、テーブルに枠線は表示されません。これは時には便利ですが、多くの場合、枠線を表示したいです。
枠線属性を使用して枠線のあるテーブルを表示します：
<table border="1"> <tr> <td>行 1、セル 1</td> <td>行 1、セル 2</td> </tr> </table>
テーブルの表頭
テーブルの表頭は <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>
以下のようにブラウザで表示されます：
| 見出し | 別の見出し |
|---|---|
| 行 1、セル 1 | 行 1、セル 2 |
| 行 2、セル 1 | 行 2、セル 2 |
テーブルの空のセル
一部のブラウザでは、内容のないテーブルセルがよく表示されません。空のセル（内容がないセル）がある場合、ブラウザはこのセルの枠線を表示できないかもしれません。
<table border="1"> <tr> <td>行 1、セル 1</td> <td>行 1、セル 2</td> </tr> <tr> <td></td> <td>行 2、セル 2</td> </tr> </table>
ブラウザは以下のように表示するかもしれません：
注意：この空のセルの枠線は表示されていません。このような状況を避けるために、空のセルにスペースの占位符を追加すると、枠線が表示されます。
<table border="1"> <tr> <td>行 1、セル 1</td> <td>行 1、セル 2</td> </tr> <tr> <td> </td> <td>行 2、セル 2</td> </tr> </table>
以下のようにブラウザで表示されます：
| 行 1、セル 1 | 行 1、セル 2 |
| 行 2、セル 2 |
もっとの例
- 枠線のないテーブル
- この例では、枠線のないテーブルを示します。
- テーブルのヘッダー（Heading）
- この例では、テーブルのヘッダーを表示する方法を示します。
- 空のセル
- この例では、「 」を使用して内容のないセルを処理する方法を示します。
- タイトル付きのテーブル
- この例では、タイトル（caption）付きのテーブルを示します。
- 行や列をまたぐテーブルのセル
- この例では、行や列をまたぐテーブルのセルを定義する方法を示します。
- テーブル内のタグ
- この例では、異なる要素内に要素を表示する方法を示します。
- セル余白（Cell padding）
- この例では、セルの内容と枠との間に空白を作成するために「Cell padding」を使用する方法を示します。
- セル间距（Cell spacing）
- この例では、セル間の距離を増やすために「Cell spacing」を使用する方法を示します。
- テーブルに背景色または背景画像を追加します
- この例では、テーブルに背景を追加する方法を示します。
- テーブルのセルに背景色または背景画像を追加します
- この例では、1つまたは複数のテーブルのセルに背景を追加する方法を示します。
- テーブルのセル内に内容を並べます
- この例では、セルの内容を並べ替え、美しいテーブルを作成するために「align」属性を使用する方法を示します。
- フレーム（frame）属性
- この例では、テーブルの周囲の枠を制御するために「frame」属性を使用する方法を示します。
テーブルタグ
| テーブル | 説明 |
|---|---|
| <table> | テーブルを定義します。 |
| <caption> | テーブルのタイトルを定義します。 |
| <th> | テーブルのヘッダーを定義します。 |
| <tr> | テーブルの行を定義します。 |
| <td> | テーブルのセルを定義します。 |
| <thead> | テーブルのヘッダーを定義します。 |
| <tbody> | テーブルの主体を定義します。 |
| <tfoot> | テーブルのフッターを定義します。 |
| <col> | テーブルの列に使用される属性を定義します。 |
| <colgroup> | テーブルの列のグループを定義します。 |
