HTMLテーブル

HTML画像 HTMLリスト

HTML を使用してテーブルを作成できます。

例

テーブル
この例では、HTML ドキュメント内にテーブルを作成する方法を示します。
表の境界線
この例では、さまざまなタイプのテーブルの境界線を示します。

(その他の例はこのページの下部にあります)

フォーム

テーブルは <table> タグで定義されます。 各テーブルには行 ( タグで定義) があり、各行はセル ( タグで定義) に分割されます。 文字 td は、データ セルの内容であるテーブル データを指します。 データ セルには、テキスト、画像、リスト、段落、フォーム、水平線、表などを含めることができます。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

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

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表と枠線の属性

境界線属性が定義されていない場合、テーブルには境界線が表示されません。 これは便利な場合もありますが、ほとんどの場合は境界線を表示したいと考えます。

ボーダー付きのテーブルを表示するには、border プロパティを使用します。

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

テーブルのヘッダー

テーブルのヘッダーは、<th> タグを使用して定義されます。

ほとんどのブラウザでは、テーブルのヘッダーが中央に太字で表示されます。

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

ブラウザでの表示は次のとおりです。

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表内の空のセル

コンテンツのない表のセルは、一部のブラウザでは適切に表示されません。 セルが空（コンテンツがない）の場合、ブラウザはセルの境界線を表示できない場合があります。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

ブラウザには次のように表示される場合があります:

表内の空のセル

ブラウザには次のように表示される場合があります:

注: 空のセルの境界線は表示されません。 この状況を回避するには、空のセルにスペースのプレースホルダーを追加すると、境界線を表示できます。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

これはブラウザに表示されます:

row 1, cell 1 row 1, cell 2
  row 2, cell 2

その他の例

枠線のない表
この例は、枠線のないテーブルを示しています。
表の見出し
この例は、テーブル ヘッダーを表示する方法を示します。
空のセル
この例は、「&nbsp;」を使用してコンテンツのないセルを処理する方法を示しています。
タイトル付きの表
この例は、キャプション付きの表を示しています
行または列にまたがる表のセル
この例では、行または列にまたがるテーブル セルを定義する方法を示します。
テーブル要素
この例では、さまざまな要素内の要素を表示する方法を示します。
セルのパディング
この例では、セル パディングを使用してセルの内容と境界線の間に空白を作成する方法を示します。
セル間隔
この例では、セル間隔を使用してセル間の距離を広げる方法を示します。
​​背景色または背景画像を表に追加します
この例では、テーブルに背景を追加する方法を示します。
​​表のセルに背景色または背景画像を追加する
この例では、1 つ以上の表のセルに背景を追加する方法を示します。
表のセル内のコンテンツを配置する
この例では、見栄えの良い表を作成するために、"align" 属性を使用してセルの内容を揃える方法を示します。
フレーム属性
この例では、「frame」属性を使用してテーブルの周囲の境界線を制御する方法を示します。

フォームタブ

シート 説明
<table> テーブルを定義する
<caption> テーブルのタイトルを定義する。
<th> テーブルのヘッダーを定義する。
<tr> テーブルの行を定義する。
<td> 表のセルを定義します。
<thead> テーブルのヘッダーを定義する。
<tbody> フォームの本体を定義する。
<tfoot> テーブルのフッターを定義します。
<col> テーブル列のプロパティを定義します。
<colgroup> テーブルの列を定義するグループ。
HTML画像 HTMLリスト