Search

表（テーブル）

  1. table〔表〕
  2. tr〔行グループ〕
  3. td〔セル〕
  4. th〔見出しセル〕
  5. thead／tbody／tfoot〔ヘッダ、本体、フッタ〕
  6. caption〔表題〕
  7. col〔構造的な行グループ〕
  8. colgroup〔非構造的な行グループ〕

table
表

2008/3/26

構文

<table>　～　</table>

説明

table要素は、表を表すブロック要素です。
table要素内には、tbody要素またはtr要素が、1回以上出現する必要があります。

table要素に「表題」を付ける場合は、caption要素を使用します。 その場合、caption要素は、table要素内に1回のみ出現することができます。

行をグループ化する場合は、col要素またはcolgroup要素のいずれかを使用します。 その場合、これらの要素は、table要素内に0回または任意回数出現することができます。

表のヘッダ、フッタを定義する場合は、thead要素、tfoot要素を使用します。 その場合、これらの要素は、table要素内に0回または1回出現することができます。

属性

table要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
一般属性-STFS任意style属性はCSSで代替。
summary="%Text"表の内容の要約を指定。STFS任意　
width="%Length"表の幅を指定。STFS任意CSS（widthプロパティ）で代替。
border="%Pixels"表の枠線を指定。STFS任意CSS（borderプロパティ）で代替。
frame="%TFrame"表の外枠の表示方法を指定。STFS任意CSS（borderプロパティ）で代替。
rules="%TFrame"表の内枠の表示方法を指定。STFS任意CSS（borderプロパティ）で代替。
cellspacing="%Length"セルの外余白を指定。STFS任意CSS（border-spacingプロパティ）で代替。
cellpadding="%Length"セルの内余白を指定。STFS任意CSS（paddingプロパティ）で代替。
align="%TAlign"表の左右方向の配置位置を指定。TF-任意CSS（text-alignプロパティ）で代替。
bgcolor"Color"表の背景色を指定。TF-任意CSS（background-colorプロパティ）で代替。

table要素のalign属性、bgcolor属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。 これら属性は非推奨属性のため、CSSで代替しましょう。

サンプル

サンプルを見る
<div class="tbl">
	<table></table>
</div>

tr
行グループ

2008/3/26

構文

<tr>　～　</tr>

説明

tr要素は、表の行グループを表す要素です。
tr要素内には、th要素またはtd要素が1回以上出現する必要があります。

属性

th要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
一般属性-STFS任意style属性はCSSで代替。
%cellalign左右方向の整列位置を指定。STFS任意CSS（text-alignプロパティ）で代替。
%cellvalign上下方向の整列位置を指定。STFS任意CSS（vertical-alignプロパティ）で代替。
bgcolor"Color"表の背景色を指定。TF-任意CSS（background-colorプロパティ）で代替。

tr要素のbgcolor属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されたため、CSSで代替しましょう。 また、XHTMLでは文書構造と視覚表現を分離するため、align属性、valign属性もCSSで代替しましょう。

サンプル

サンプルを見る
<div class="tbl">
	<table>
		<tr></tr>
		<tr></tr>
		<tr></tr>
	</table>
</div>

td
セル

2008/3/26

構文

<td>　～　</td>

説明

td要素は、表のセルを表す要素です。
td要素は、tr要素内に記述します。

属性

td要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
一般属性-STFS任意style属性はCSSで代替。
abbr="%Text"セルデータの省略形を指定。STFS任意　
axis="%CDATA"見出しに軸を指定。STFS任意　
headers="%IDREFS"セルに関連のある見出しセル情報を指定。STFS任意　
scope="Scope"行・列単位で関連のある見出しセル情報を指定。STFS任意　
rowspan="%Number"連結する行数を指定。STFSデフォルトは"1"　
colspan="%Number"連結するセル数を指定。STFSデフォルトは"1"　
%cellalign左右方向の整列位置を指定。STFS任意text-alignプロパティ）で代替。
%cellvalign上下方向の整列位置を指定。STFS任意vertical-alignプロパティ）で代替。
nowrap="nowrap"　TF-任意CSS（white-spaceプロパティ）で代替。
bgcolor"Color"表の背景色を指定。TF-任意CSS（background-colorプロパティ）で代替。
width="%Length"幅を指定。TF-任意CSS（widthプロパティ）で代替。
height="%Length"高さを指定。TF-任意CSS（widthプロパティ）で代替。

td要素のnowrap属性、bgcolor属性、width属性、height属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されたため、これらの属性はCSSで代替しましょう。 また、XHTMLでは文書構造と視覚表現を分離するため、align属性、valign属性もCSSで代替しましょう。

サンプル

サンプルを見る
<div class="tbl">
	<table>
		<tr>
			<td>Creative Suite3 Web Premium</td>
			<td>226,000円</td>
		</tr>
		<tr>
			<td>Creative Suite 3 Design Premium</td>
			<td>298,000円</td>
		</tr>
		<tr>
			<td>Creative Suite3 Design Standard</td>
			<td>198,000円</td>
		</tr>
		<tr>
			<td>Creative Suite 3 Production Premium</td>
			<td>261,000円</td>
		</tr>
	</table>
</div>
Creative Suite3 Web Premium 226,000円
Creative Suite 3 Design Premium 298,000円
Creative Suite3 Design Standard 198,000円
Creative Suite 3 Production Premium 261,000円

th
見出しセル

2008/3/26

構文

<th>　～　</th>

説明

th要素は、表の見出しセルを表す要素です。
th要素は、tr要素内に記述します。

属性

th要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
一般属性-STFS任意style属性はCSSで代替。
abbr="%Text"セルデータの省略形を指定。STFS任意　
axis="%CDATA"見出しに軸を指定。STFS任意　
headers="%IDREFS"セルに関連のある見出しセル情報を指定。STFS任意　
scope="Scope"行・列単位で関連のある見出しセル情報を指定。STFS任意　
rowspan="%Number"連結する行数を指定。STFSデフォルトは"1"　
colspan="%Number"連結するセル数を指定。STFSデフォルトは"1"　
%cellalign左右方向の整列位置を指定。STFS任意CSS（text-alignプロパティ）で代替。
%cellvalign上下方向の整列位置を指定。STFS任意CSS（vertical-alignプロパティ）で代替。
nowrap="nowrap"　TF-任意　
bgcolor"Color"表の背景色を指定。TF-任意CSS（background-colorプロパティ）で代替。
width="%Length"幅を指定。STFS任意CSS（widthプロパティ）で代替。
height="%Length"高さを指定。STFS任意CSS（widthプロパティ）で代替。

th要素のnowrap属性、bgcolor属性、width属性、height属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されたため、これらの属性はCSSで代替しましょう。 また、XHTMLでは文書構造と視覚表現を分離するため、align属性、valign属性もCSSで代替しましょう。

サンプル

サンプルを見る
<div class="tbl">
	<table>
		<tr>
			<th>製品名</th>
			<th>価格</th>
		</tr>
		<tr>
			<td>Creative Suite3 Web Premium</td>
			<td>226,000円</td>
		</tr>
		<tr>
			<td>Creative Suite 3 Design Premium</td>
			<td>298,000円</td>
		</tr>
		<tr>
			<td>Creative Suite3 Design Standard</td>
			<td>198,000円</td>
		</tr>
		<tr>
			<td>Creative Suite 3 Production Premium</td>
			<td>261,000円</td>
		</tr>
	</table>
</div>
製品名 価格
Creative Suite3 Web Premium 226,000円
Creative Suite 3 Design Premium 298,000円
Creative Suite3 Design Standard 198,000円
Creative Suite 3 Production Premium 261,000円

thead／tbody／tfoot
ヘッダ、本体、フッタ

2008/3/26

構文

<thead>　～　</thead>
<tbody>　～　</tbody>
<tfoot>　～　</tfoot>

説明

表のヘッダ（thead要素）→表フッタ（tfoot要素）→表の本体（tbody要素）の順番に記述します。 これらの要素は、table要素内に記述します。

thead要素

表のヘッダであることを表す要素です。
複数の行をヘッダとしてグループ化するのに使用します。
thead要素は、table要素内で1回のみ出現可能です。
thead要素内には、tr要素が1回以上出現する必要があります。
caption属性、col属性、colgroup属性を含める場合は、この順番に記述します。

tbody要素

表の本体であることを表す要素です。
複数の行をグループ化するのに使用します。
tbody要素内には、tr要素が1回以上出現する必要があります。

tfoot要素

表のフッタであることを表す要素です。
複数の行をフッタとしてグループ化するのに使用します。
tfoot要素は、table要素内で1回のみ出現可能です。
tfoot要素内には、tr要素が1回以上出現する必要があります。

属性

thead、tfoot、tbody要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
一般属性-STFS任意style属性はCSSで代替。
%cellalign左右方向の整列位置を指定。STFS任意text-alignプロパティ）で代替。
%cellvalign上下方向の整列位置を指定。STFS任意vertical-alignプロパティ）で代替。

サンプル

サンプルを見る
<div class="tbl">
	<table>
		<thead>
			<tr>
				<th>製品名</th>
				<th>価格</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>合計金額</th>
				<th>983,000円</th>
			</tr>
		</tfoot>
		<tbody>
			<tr><td>Creative Suite3 Web Premium</td><td>226,000円</td></tr>
			<tr><td>Creative Suite 3 Design Premium</td><td>298,000円</td></tr>
			<tr><td>Creative Suite3 Design Standard</td><td>198,000円</td></tr>
			<tr><td>Creative Suite 3 Production Premium</td><td>261,000円</td></tr>
		</tbody>
	</table>
</div>
製品名 価格
合計金額 983,000円
Creative Suite3 Web Premium226,000円
Creative Suite 3 Design Premium298,000円
Creative Suite3 Design Standard198,000円
Creative Suite 3 Production Premium261,000円

caption
表題

2008/3/26

構文

<caption>　～　</caption>

説明

caption属性は、表題を表すインライン要素です。

属性

caption要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
一般属性-STFS任意style属性はCSSで代替。
align="%CAlign"表の左右方向の配置位置を指定。TF-任意CSS（caption-sideプロパティ）で代替。

align属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。

サンプル

サンプルを見る
<div class="tbl">
	<table>
		<caption>Adobe製品の価格表</caption>
		<tr>
			<th>製品名</th>
			<th>製品版の価格（税込）</th>
		</tr>
		<tr>
			<td>Creative Suite 3 Web Premium</td>
			<td>226,000円</td>
		</tr>
		<tr>
			<td>Photoshop CS3</td>
			<td>100,000円</td>
		</tr>
		<tr>
			<td>Flash CS3 Professional</td>
			<td>88,000円</td>
		</tr>
		<tr>
			<td>Acrobat 8 Professonal</td>
			<td>57,540円</td>
		</tr>
		<tr>
			<td>Creative Suite 3 Production Premium</td>
			<td>261,000円</td>
		</tr>
	</table>
</div>
Adobe製品の価格表
製品名 製品版の価格（税込）
Creative Suite 3 Web Premium 226,000円
Photoshop CS3 100,000円
Flash CS3 Professional 88,000円
Acrobat 8 Professonal 57,540円
Creative Suite 3 Production Premium 261,000円

col
構造的な行グループ

2008/3/26

構文

<col>　～　</col>

説明

col要素は、構造的な行グループを表す要素です。
col要素は空要素のため、<col />のように記述します。

属性

col要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
一般属性-STFS任意style属性はCSSで代替。
span="%Number"グループ化する列数を指定。省略した場合は、デフォルト値の"1"（1列）が適用されます。STFS"1"　
width="%MultiLength"幅を指定。STFS任意CSS（widthプロパティ）で代替。
%cellalign左右方向の整列位置を指定。STFS任意text-alignプロパティ）で代替。
%cellvalign上下方向の整列位置を指定。STFS任意vertical-alignプロパティ）で代替。

サンプル

サンプルを見る
<div class="tbl">
	<table>
		<colgroup span="2">
	    	<col span="1" width="200" style="background-color:#ffffcc" />
	        <col span="1" width="250" style="background-color: #ffccff" />
		</colgroup>
		<thead>
			<tr>
				<th>製品名</th>
				<th>価格</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>合計金額</th>
				<th>983,000円</th>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>Creative Suite3 Web Premium</td>
				<td>226,000円</td>
			</tr>
			<tr>
				<td>Creative Suite 3 Design Premium</td>
				<td>298,000円</td>
			</tr>
			<tr>
				<td>Creative Suite3 Design Standard</td>
				<td>198,000円</td>
			</tr>
			<tr>
				<td>Creative Suite 3 Production Premium</td>
				<td>261,000円</td>
			</tr>
		</tbody>
	</table>
</div>
製品名 価格
合計金額 983,000円
Creative Suite3 Web Premium 226,000円
Creative Suite 3 Design Premium 298,000円
Creative Suite3 Design Standard 198,000円
Creative Suite 3 Production Premium 261,000円

colgroup
非構造的な行グループ

2008/3/26

構文

<colgroup>　～　</colgroup>

説明

colgroup要素は、非構造的な行グループを表す要素です。
colgroup要素内には、col要素を0回または任意回数出現することができます。

属性

colgroup要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
一般属性-STFS任意style属性はCSSで代替。
span="%Number"グループ化する列数を指定。省略した場合は、デフォルト値の"1"（1列）が適用されます。STFS"1"　
width="%MultiLength"幅を指定。STFS任意CSS（widthプロパティ）で代替。
%cellalign左右方向の整列位置を指定。STFS任意text-alignプロパティ）で代替。
%cellvalign上下方向の整列位置を指定。STFS任意vertical-alignプロパティ）で代替。

align属性、valign属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。

サンプル

サンプルを見る
<div class="tbl">
	<table>
		<colgroup span="2" style="background-color:#ffffcc" /></colgroup>
		<thead>
			<tr>
				<th>製品名</th>
				<th>価格</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>合計金額</th>
				<th>983,000円</th>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>Creative Suite3 Web Premium</td>
				<td>226,000円</td>
			</tr>
			<tr>
				<td>Creative Suite 3 Design Premium</td>
				<td>298,000円</td>
			</tr>
			<tr>
				<td>Creative Suite3 Design Standard</td>
				<td>198,000円</td>
			</tr>
			<tr>
				<td>Creative Suite 3 Production Premium</td>
				<td>261,000円</td>
			</tr>
		</tbody>
	</table>
</div>
製品名 価格
合計金額 983,000円
Creative Suite3 Web Premium 226,000円
Creative Suite 3 Design Premium 298,000円
Creative Suite3 Design Standard 198,000円
Creative Suite 3 Production Premium 261,000円

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2024 PHP & JavaScript Room All Rights Reserved.

pagetop