TD 要素

　　表のセル

［カテゴリー］

セクショニングのルート

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

TR 要素の中．

［コンテンツモデル］

フローコンテンツが入る．

［コンテンツ属性］

グローバル属性
colspan ：結合する列の数
rowspan ：結合する行の数
headers ：セルがどの見出しセルと対応しているかを TH 要素の ID 属性の値で指定（スペースで区切って複数指定可能）

［DOM インタフェース］

interface HTMLTableDataCellElement : HTMLTableCellElement {};

［使用例］

使用例１とそのソースコード：　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>