HTML リファレンスマニュアル

HTML タグ完全ガイド

HTML: <table> タグ

オンラインサンプル

2つのHTMLテーブルのデモ：

例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML テーブルタグの使用（基本チュートリアルウェブ3codebox.com)/title>
</head>
<body>
<table　border="1">
　　<tr>
　　　　<th>Item</th>
　　　　<th>Amount</th>
　　</tr>
　　<tr>
　　　　<td>Bananas</td>
　　　　<td>$5</td>
　　</tr>
　　<tr>
　　　　<td>Oranges</td>
　　　　<td>$17</td>
　　</tr>
</table>
<br>
<table　border="1">
　　　　<thead>
　　　　　　　　<tr>
　　　　　　　　　　　　<th　colspan="2">The　table　header</th>
　　　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　　　<tr>
　　　　　　　　　　　　<td>The　table　body</td>
　　　　　　　　　　　　<td>with　two　columns</td>
　　　　　　　　</tr>
　　　　</tbody>
</table>
</body>
</html>

テストして‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

すべての主要ブラウザが<table>タグをサポートしています。

タグの定義および使用方法

<table>タグはHTMLテーブルを定義します。

HTMLテーブルは<table>要素1つと、1つ以上の <tr>、<th> および <td> 要素。

<tr>要素はテーブル行を定義し、<th>要素は表頭を定義し、<td>要素はテーブルセルを定義します。

のより複雑なテーブルも、<caption>、<col>、<colgroup>、<thead>、<tfoot>および<body>要素を含む可能性があります。

HTML 4.01 HTML5の違い

HTML5 中では、"border"属性のみサポートされ、値""のみを使用することが許可されています。1"または""

属性

属性	値	説明
align	left center right	HTML5 サポートされていません。HTML 4.01 廃止されました。テーブルが周囲の要素に対してどのように配置されるかを指定します。
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 サポートされていません。HTML 4.01 廃止されました。テーブルの背景色を指定します。
枠線	1 ""	テーブルセルに枠線があるかどうかを指定します。
cellpadding	ピクセル	HTML5 サポートされていません。セルの縁と内容間のスペースを指定します。
cellspacing	ピクセル	HTML5 サポートされていません。セル間のスペースを指定します。
フレーム	void 　above 　below 　hsides 　lhs 　rhs 　vsides 　ボックス　枠線	HTML5 サポートされていません。外部枠線のどの部分が見えるかを指定します。
ルール	なし　グループ　行　列　すべて	HTML5 サポートされていません。内部枠線のどの部分が見えるかを指定します。
サマリー	text	HTML5 サポートしていない。テーブルの要約を指定します。
width	ピクセル　%	HTML5 サポートしていない。テーブルの幅を指定します。

グローバル属性

<table> タグがサポート HTMLのグローバル属性。

イベント属性

<table> タグがサポート HTMLのイベント属性。

さらに多くのオンラインサンプル

枠線のないテーブル
枠線のないテーブル

テーブルの表頭(ヘディング)
このサンプルでは、テーブルの表頭を表示する方法を示します。

タイトル付きのテーブル
このサンプルでは、タイトル（キャプション）付きのテーブルを示します。

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

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

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

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

HTML チュートリアル：HTML テーブル

HTML DOM リファレンスマニュアル：Table オブジェクト

HTML: <tbody> タグ HTML: <summary> タグ