TABLE:表

テーブル（表）

HTML制作には欠かすことのできない要素が、テーブルです。単なる表組だけでなく、レイアウトに用いたり、その応用は大変奥深いものがあります。

<要素 Attribute>＊＊＊＊</要素>


タグ	Attribute	終了タグ	説明
表組み（テーブル）
<TABLE> table	表組み	必要	表組の開始と終わり
	BORDER		外枠無し
	BORDER= n or %		外枠のサイズ、ピクセル値、%割合
	WIDTH= n or %		表幅、ピクセル値、%割合
	CELLSPACING=n		項目間のサイズ
	CELLPADDING=n		項目内のサイズ
	BACKGROUND= url		表の背景に画像を表示する
	BGCOLOR= #ffffff		表の背景に色を付ける
	BORDERCOLOR= #ffffff		表の枠線に色を付ける
	BORDERCOLORDARK= #ffffff		立体枠線の暗い色（右：下）
	BORDERCOLORRIGHT= #ffffff		立体枠線の明るい色（右：下）
	COL		COL ALIGN= 列のテキストの文字そろえ
	style="table-layout:fixed "		ＴＡＢＬＥ表示を早くする
	FRAME= （ＩＥ拡張）		void :表の外枠をすべて削除する
			above :表枠の上枠線を表示する
			below :下枠線を表示する
			hsides :上と下を表示する
			lhs :左枠線を表示する
			rhs :右枠線を表示する
			vsides :左右の枠線を表示する
			box :四辺すべての枠を表示する
	RULES= （ＩＥ拡張）		none :表の内枠をすべて削除する
			basic :すべてに水平線を引く
			rows :行間に線を引く
			cols :列間に水平線
			all: すべての行と列に線を引く
<caption>	align= top bottom left right	必要	表に見出し（タイトル、キャプション）をつけます。場所は上と下が可能です。
<THEAD> table header	TR,TH,TD	必要	表のヘッダ－を定義
<TBODY> table body	TR,TH,TD	必要	表のボデイを定義
<TFOOT> table footer	TR,TH,TD	必要	表のフッタを定義
<TR> T able Row	<TABLE>内に配置	必要	行要素を定義
	ALIGN=LEFT		行要素の左右表示位置を左揃え
	ALIGN=CENTER		行要素の左右表示位置を中央揃え
	ALIGN=RIGHT		行要素の左右表示位置を右揃え
	ALIGN=TOP		行要素の上下表示位置を上揃え
	ALIGN=MIDDLE		行要素の上下表示位置を中央揃え
	ALIGN=middle		行要素の上下表示位置を下揃え
	BGCOLOR= #hhhhhh		行要素バックカラ－の指定ＩＥ
<TH> T able Header cell	<TR>内に配置	必要	行または列の見出し
	ALIGN=LEFT		見出し要素の左右表示位置を左揃え
	ALIGN=CENTER		見出し要素の左右表示位置を中央揃え
	ALIGN=RIGHT		見出し要素の左右表示位置を右揃え
	ALIGN=TOP		見出し要素の上下表示位置を上揃え
	ALIGN=MIDDLE		見出し要素の上下表示位置を中央揃え
	ALIGN=middle		見出し要素の上下表示位置を下揃え
	WIDTH=n		見出し幅、ピクセル値、％割合
	ROWSPAN=n		見出し要素の行数
	COLSPAN=n		見出し要素の列数
	NOWRAP		見出し要素の改行無し
	BGCOLOR= #hhhhhh		見出し要素バックカラ－の指定ＩＥ
<TD> Table Data cell	<TR>内に配置	必要	表のデータ
	ALIGN=LEFT		データの左右表示位置を左揃え
	ALIGN=CENTER		データの左右表示位置を中央揃え
	ALIGN=RIGHT		データの左右表示位置を右揃え
	ALIGN=TOP		データの上下表示位置を上揃え
	ALIGN=MIDDLE		データの上下表示位置を中央揃え
	ALIGN=middle		データの上下表示位置を下揃え
	WIDTH=n		データ幅、ピクセル値、％割合
	ROWSPAN=n		データの行数
	COLSPAN=n		データの列数
	NOWRAP		データの改行無し
	BGCOLOR=#hhhhhh		デ－タ要素バックカラ－の指定ＩＥ
	BACKGROUND= url		表の背景に画像を表示する
	BORDERCOLOR= #ffffff		表の枠線に色を付ける
	BORDERCOLORDARK= #ffffff		立体枠線の暗い色（右：下）
	BORDERCOLORRIGHT= #ffffff		立体枠線の明るい色（右：下）
<CAPTION> table caption	<TABLE>内に配置	必要	表題
	ALIGN=TOP		表の上に表示
	ALIGN=middle		表の下に表示

<table bgcolor="#ffffcc" cellpadding="0" cellspacing="0">（非推奨)
<td bgcolor="#ffffcc">（非推奨)
<div style="background-color:#ffc"> （CSSの設定：推奨）
h1 { background-color: #ffc } CSSの設定：推奨）

<table bordercolor="green">（規格外）
<table style="border:thin solid green"> （CSS設定：推奨）
div { border-top: 3px double #090 }（CSS設定：推奨）

テーブルの幅の設定

<table width="500"> ピクセル設定 <table width="70%"> パーセント設定

テーブルの枠線の設定

属性	値	機能
border	ピクセル	表全体、データセルを含めて枠線を表示。デフォルト値は 0
frame	void	枠の表示をしない（デフォルト値）
	above	データセルの上側の枠線のみ表示
	below	データセルの下側の枠線のみ表示
	hside	データセルの上下の枠線のみ表示
	lhs	データセルの左の枠線のみ表示
	rhs	データセルの右の枠線のみ表示
	vside	データセルの左右の枠線のみ表示
	box	データセルの上下左右の枠線を表示
	border	データセルの上下左右の枠線を表示
rules	none	枠の表示をしない（デフォルト値）
	groups	横方向のグループ化した枠線を表示
	rows	横の列の境界の枠線のみ表示
	cols	縦の列の境界の枠線のみ表示
	all	すべての境界の枠線を表示