TR 要素

　　表の一行

［カテゴリー］

なし

［要素を使用できる文脈］

THEAD 要素，TBODY 要素，TFOOT 要素の中．
TABLE 要素の中で，CAPTION 要素，COLGROUP 要素，THEAD 要素の後．ただし，TBODY 要素があってはいけない．

［コンテンツモデル］

0 個以上の TH 要素，または，TD 要素が入る．

［コンテンツ属性］

グローバル属性

［DOM インタフェース］

interface HTMLTableRowElement : HTMLElement {
  readonly attribute long rowIndex;
  readonly attribute long sectionRowIndex;
  readonly attribute HTMLCollection cells;
  HTMLElement insertCell(optional long index);
  void deleteCell(long index);
};

［使用例］

使用例１とそのソースコード：　TABLE 要素，CAPTION 要素，TR 要素，TH 要素，及び，TD 要素を使用して，枠がない表を作成している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>TABLE 要素の使用例</TITLE>
					<!-- スタイルシート -->
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
	<STYLE>
		TABLE { margin: auto; }
	</STYLE>
					<!-- 文字コード -->
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
					<!-- スマホ -->
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
</HEAD>
<BODY CLASS="white">
	<DIV CLASS="center">
		<P>枠なしの表</P>
		<TABLE>
			<CAPTION><EM>国語と算数の平均点</EM></CAPTION>
			<TR>
				<TH>クラス
				<TH>国語
				<TH>算数
				<TH>全体
			</TR>
			<TR>
				<TH>１組
				<TD>60.3
				<TD>70.5
				<TD>65.4
			</TR>
			<TR>
				<TH>２組
				<TD>55.4
				<TD>79.2
				<TD>67.3
			</TR>
		</TABLE>
	</DIV>
</BODY>
</HTML>

使用例２とそのソースコード：　TABLE 要素，CAPTION 要素，TR 要素，TH 要素，及び，TD 要素を使用して，枠がある表を作成している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>TABLE 要素の使用例</TITLE>
					<!-- スタイルシート -->
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
	<STYLE>
		TABLE { margin: auto; border: solid thick; }
		TH { border: solid medium; }
		TD { border: solid thin; }
	</STYLE>
					<!-- 文字コード -->
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
					<!-- スマホ -->
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
</HEAD>
<BODY CLASS="white">
	<DIV CLASS="center">
		<P>枠ありの表</P>
		<TABLE>
			<CAPTION><EM>国語と算数の平均点</EM></CAPTION>
			<TR>
				<TH>クラス</TH>
				<TH>国語</TH>
				<TH>算数</TH>
				<TH>全体</TH>
			</TR>
			<TR>
				<TH>１組</TH>
				<TD>60.3</TD>
				<TD>70.5</TD>
				<TD>65.4</TD>
			</TR>
			<TR>
				<TH>２組</TH>
				<TD>55.4</TD>
				<TD>79.2</TD>
				<TD>67.3</TD>
			</TR>
		</TABLE>
	</DIV>
</BODY>
</HTML>

使用例３とそのソースコード：　TABLE 要素，CAPTION 要素，TR 要素，TH 要素，TD 要素，COL 要素，COLGROUP 要素，THEAD 要素，TFOOT 要素，及び，TBODY 要素を使用して，グループ毎にセルの幅やフォントを変化させた枠がある表を作成している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>表（グループ）</TITLE>
					<!-- スタイルシート -->
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
	<STYLE>
		TABLE { margin: auto; border: solid thick; }
		COLGROUP { width: 100px }
		COL.w200 { width: 200px }
		TD { border: solid thin; text-align: right; }
		TH { border: solid medium; }
		TBODY TH { text-align: left; border: solid medium; }
		THEAD,TFOOT { font-size: 130% }
	</STYLE>
					<!-- 文字コード -->
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
					<!-- スマホ -->
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
</HEAD>
<BODY CLASS="white">
	<DIV CLASS="center">
		<TABLE>
			<CAPTION><EM>国語と算数の平均点</EM></CAPTION>
			<COL CLASS="w200">
			<COLGROUP>
				<COL SPAN="2">
				<COL CLASS="w200">
			</COLGROUP>
			<THEAD>
				<TR>
					<TH>クラス</TH>
					<TH>国語</TH>
					<TH>算数</TH>
					<TH>全体</TH>
				</TR>
			</THEAD>
			<TFOOT>
				<TR>
					<TH>平均</TH>
					<TD>57.9</TD>
					<TD>74.9</TD>
					<TD>66.4</TD>
				</TR>
			</TFOOT>
			<TBODY>
				<TR>
					<TH>１組</TH>
					<TD>60.3</TD>
					<TD>70.5</TD>
					<TD>65.4</TD>
				</TR>
				<TR>
					<TH>２組</TH>
					<TD>55.4</TD>
					<TD>79.2</TD>
					<TD>67.3</TD>
				</TR>
			</TBODY>
		</TABLE>
	</DIV>
</BODY>
</HTML>

使用例４とそのソースコード：　TABLE 要素，CAPTION 要素，TR 要素，TH 要素，TD 要素，COL 要素，COLGROUP 要素，THEAD 要素，TFOOT 要素，及び，TBODY 要素を使用して，複数の行や列を結合した枠がある表を作成している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>TABLE 要素の使用例</TITLE>
					<!-- スタイルシート -->
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
	<STYLE>
		TABLE { margin: auto; border: solid thick; }
		TH { border: solid medium; }
		TD { border: solid thin; }
	</STYLE>
					<!-- 文字コード -->
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
					<!-- スマホ -->
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
</HEAD>
<BODY CLASS="white">
	<DIV CLASS="center">
		<TABLE>
			<CAPTION>県名と旧国名</CAPTION>
			<TR>
				<TH>地域
				<TH>県名
				<TH COLSPAN="3">旧国名
			</TR>
			<TR>
				<TH ROWSPAN="3">中部
				<TD>静岡県
				<TD>遠江
				<TD>駿河
				<TD>伊豆
			</TR>
			<TR>
				<TD>愛知県
				<TD>尾張
				<TD>三河
				<TD>　
			</TR>
			<TR>
				<TD>岐阜県
				<TD>美濃
				<TD>飛騨
				<TD>　
			</TR>
			<TR>
				<TH ROWSPAN="2">四国
				<TD>徳島県
				<TD>阿波
				<TD>　
				<TD>　
			</TR>
			<TR>
				<TD>香川県
				<TD>讃岐
				<TD>　
				<TD>　
			</TR>
		</TABLE>
	</DIV>
</BODY>
</HTML>