株式会社K-fix

テーブル関連要素

table要素（テーブル）

カテゴリ	フロー・コンテンツ
コンテンツモデル	次の順に要素を入れる ① 1個のcaption要素（オプション） ② 0個以上のcolgroup要素 ③ 1個のthead要素（オプション） ④ 1個のtfoot要素（オプション） ⑤ 0個以上のtbody要素、または1個以上のtr要素 ⑥ 1個のtfoot要素（オプション） ※ tfoot要素は1つしか入れてはいけない。
利用可能な場所	フロー・コンテンツが期待される場所
開始タグ	必須
終了タグ	必須
要素固有のコンテンツ属性	summary（テーブルの内容の説明文を指定）
デフォルトスタイル	table{ display:table; border-spacing:2px; border-collapse:separate; border-color:gray; border-style:outset; }

table要素はテーブルを表します。
table要素の中には、テーブルの見出し行となるthead要素を入れます。thead要素の中には行を表すtr要素を入れ、さらにその中にth要素でヘッダセルを入れます。
thead要素の次には、テーブルのデータを表すtbody要素を入れ、そのtbody要素の中には行となるtr要素、そしてtr要素の中ではデータセルとなるtd要素を使います。
必要であれば、テーブルのタイトルや説明文をcaption要素を使ってテキストをセットします。

■利用例

  <table>
  	<caption>ブラウザのシャア率（2011年1月）</caption>
  	<thead>
  		<tr>
  			<th>ブラウザ名</th>
  			<th>％</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>Internet Explorer</td>
  			<td>56.00</td>
  		</tr>
  		<tr>
  			<td>Firefox</td>
  			<td>22.75</td>
  		</tr>
  		<tr>
  			<td>Chrome</td>
  			<td>10.70</td>
  		</tr>
  		<tr>
  			<td>Safari</td>
  			<td>6.30</td>
  		</tr>
  		<tr>
  			<td>Opera</td>
  			<td>1.98</td>
  		</tr>
  	</tbody>
  </table>

利用例をブラウザでレンダリングすると下図のようになります。なお、スタイルシートを使ってスタイルを施しています。

今までウェブ・ページに段組みのためにtable要素を使っていたサイトが多かったですが、レイアウト目的でtable要素を使ってしまうと、セマンティックスが正しくないだけでなく、アクセシビリティを大きく損なうことになります。table要素をレイアウト目的で使うことは非推奨なので注意しましょう。

caption要素（テーブルのタイトルや説明文）

カテゴリ	なし
コンテンツモデル	フロー・コンテンツ。ただし、中にtable要素は入れてはいけない。
利用可能な場所	table要素の最初の子として
開始タグ	必須
終了タグ	必須
要素固有のコンテンツ属性	なし
デフォルトスタイル	table{ display:table-caption; }

caption要素はテーブルのタイトルや説明文を表します。caption要素のコンテンツ・モデルは、フロー・コンテンツですので、生のテキストだけでなくp要素やdetails要素、strong要素などを入れることができます。caption要素は、table要素の最初に入れて使います。

figure要素の中にtable要素だけを入れた場合、そのtable要素のタイトルや説明文はcaption要素を入れるのではなく、figcaption要素を使うべきことに注意しましょう。

colgroup要素（テーブルの列グループ）

カテゴリ	なし
コンテンツモデル	spanコンテンツ属性を指定した場合は空。 spanコンテンツ属性を指定しない場合は0個以上のcol要素
利用可能な場所	table要素の最初の子として。ただし、caption要素より後ろで、thead要素、tbody要素、tfoot要素、tr要素より前でなければいけない。
開始タグ	colgroup要素の中で最初にcol要素が来るか、または終了タグが省略された別のcolgroup要素が最初に来ていない場合、省略することができる。
終了タグ	スペース文字やコメントが直後に来なければ、省略できる。
要素固有のコンテンツ属性	span（別グループに入れる列の数を指定）
デフォルトスタイル	colgroup{ display:table-column-group; }

colgroup要素は、col要素のみを入れることができ、テーブル内にある1つ以上の別のグループを表します。もし、col要素が1つもなければ、colgroup要素にspanコンテンツ属性を指定することができます。spanコンテンツ属性には、0より大きい整数を指定します。

■利用例

  <table>
  	<caption>人口統計</caption>
  	<colgroup span="1"></colgroup>
  	<colgroup span="2"></colgroup>
  	<colgroup span="1"></colgroup>
  	<thead>
  		<tr>
  			<th>都道府県</th>
  			<th>2010年</th>
  			<th>2005年</th>
  			<th>順位</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>東京都</td>
  			<td>13,161,751</td>
  			<td>12,576,601</td>
  			<td>1位</td>
  		</tr>
  		<tr>
  			<td>神奈川県</td>
  			<td>9,049,500</td>
  			<td>8,791,597</td>
  			<td>2位</td>
  		</tr>
  		<tr>
  			<td>大阪府</td>
  			<td>8,862,896</td>
  			<td>8,817,166</td>
  			<td>3位</td>
  		</tr>
  	</tbody>
  </table>

利用例をブラウザ上でレンダリングすると次の図のようになります。なお、テーブルはスタイルを設定しています。

利用例のテーブルでは、colgroup要素によって都道府県を表す1列、年度を表す2列、順位を表す1列としてグループ化しています。このcolgroup要素を使うことによって、セマンティクス上でも列が区別されていることを明確に意識させることができます。

col要素（テーブルの列）

カテゴリ	なし
コンテンツモデル	空
利用可能な場所	spanコンテンツ属性が指定されていないcolgroup要素の子として
開始タグ	必須
終了タグ	禁止。ただし、<col />は表記可
要素固有のコンテンツ属性	span（別グループに入れる列の数を指定）
デフォルトスタイル	col{ display:table-column; }

col要素はcolgroup要素の中だけでしか利用できなく、列を表します。また、colgroup要素の中にspanコンテンツ属性が指定されているときは、col要素をその中に入れることはできません。

■利用例

  <table>
  	<caption>人口統計</caption>
  	<colgroup span="1"></colgroup>
  	<colgroup>
  		<col class="y_2010" />
  		<col class="y_2005" />
        </colgroup>
  	<colgroup span="1"></colgroup>
  	<thead>
  		<tr>
  			<th>都道府県</th>
  			<th>2010年</th>
  			<th>2005年</th>
  			<th>順位</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>東京都</td>
  			<td>13,161,751</td>
  			<td>12,576,601</td>
  			<td>1位</td>
  		</tr>
  		<tr>
  			<td>神奈川県</td>
  			<td>9,049,500</td>
  			<td>8,791,597</td>
  			<td>2位</td>
  		</tr>
  		<tr>
  			<td>大阪府</td>
  			<td>8,862,896</td>
  			<td>8,817,166</td>
  			<td>3位</td>
  		</tr>
  	</tbody>
  </table>

利用例をブラウザ上でレンダリングすると次の図のようになります。なお、テーブルはスタイルを設定しています。

利用例では、col要素を2つ使って、2列を2つ目の列グループにしています。class要素を指定すれば、それぞれの列に対して別々のスタイルを適用できます。利用例では以下のようなスタイルを適用しています。

  <style type="text/css">
  table {
	border-collapse:collapse;
	border:1px solid #ccc;
	width:300px;
  }
  th {
	border:1px solid #ccc;
	padding:5px;
	background:#fcf;
  }
  td {
	border:1px solid #ccc;
	padding:5px;
  }
  col.y_2010 {
	background:#ccffcc;
  }
  col.y_2005 {
	background:#ffffcc;
  }
  </style>

通常、col要素は1列を表しますが、spanコンテンツ属性を使うことで、複数の列をまたがって表せられます。col要素のspanコンテンツ属性には、またがる列の数を表す1以上の整数を入れます。

thead要素（テーブルのヘッダ行グループ）

カテゴリ	なし
コンテンツモデル	0個以上のtr要素
利用可能な場所	table要素の子として、1つだけ入れられる。ただし、caption要素、colgroup要素より後ろで、tbody要素、tfoot要素、tr要素より前でなければいけない。
開始タグ	必須
終了タグ	tbody要素またはtfoot要素が直後に来るなら省略できる。
要素固有のコンテンツ属性	なし
デフォルトスタイル	thead{ display:table-header-group; vertical-align:middle; border-color:inherit; }

thead要素は、テーブルのヘッダとなる行ブロックを表します。
この要素の中に入れられるのはth要素のみで、td要素を入れることは非準拠となります。

■利用例

  <table>
  	<caption>バス料金表</caption>
  	<thead>
  		<tr>
  			<th rowspan="2">行き先</th>
  			<th colspan="2">料金</th>
  		</tr>
  		<tr>
  			<th>大人</th>
  			<th>子供</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>青島</td>
  			<td>500円</td>
  			<td>250円</td>
  		</tr>
  		<tr>
  			<td>日南</td>
  			<td>1200円</td>
  			<td>600円</td>
  		</tr>
  	</tbody>
  </table>

利用例をブラウザ上でレンダリングすると次の図のようになります。なお、テーブルはスタイルを設定しています。

tbody要素（テーブルの行グループ）

カテゴリ	なし
コンテンツモデル	0個以上のtr要素
利用可能な場所	table要素の子として、1つだけ入れられる。ただし、caption要素、colgroup要素、thead要素より後ろに入れる。
開始タグ	tbody要素の中の最初のtr要素で、終了タグが省略されたtbody要素、thead要素、tfoot要素が直前に来なければ省略できる。
終了タグ	該当のtbody要素の直後にtbody要素またはtfoot要素が来る場合、または該当のtbody要素が親要素の中で最後の要素となる場合に省略できる。
要素固有のコンテンツ属性	なし
デフォルトスタイル	tbody{ display:table-row-group; vertical-align:middle; border-color:inherit; }

tbody要素は行ブロックを表します。テーブル内で複数の行をグループとしてまとめたい場合に使います。tbody要素でマークアップする時は、すべてのtr要素をtbody要素、thead要素、tfoot要素のいずれかを入れる必要があります。よって、tr要素をtable要素の直下に入れることはできません。

■利用例

  <table>
  	<caption>クラス表</caption>
  	<thead>
  		<tr>
  			<th>クラス</th>
  			<th>性別</th>
  			<th>人数</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td rowspan="2">Aクラス</td>
  			<td>男</td>
  			<td>23人</td>
  		</tr>
  		<tr>
  			<td>女</td>
  			<td>25人</td>
  		</tr>
  	</tbody>
  	<tbody>
  		<tr>
  			<td rowspan="2">Bクラス</td>
  			<td>男</td>
  			<td>21人</td>
  		</tr>
  		<tr>
  			<td>女</td>
  			<td>26人</td>
  		</tr>
  	</tbody>
  </table>

利用例をブラウザ上でレンダリングすると次の図のようになります。なお、テーブルはスタイルを設定しています。

利用例では、クラスの種類で行をグループ化しています。セマンティクス上、明示的に行がグループ化されていることを定義しています。

tfoot要素（テーブルのフッタ行グループ）

カテゴリ	なし
コンテンツモデル	0個以上のtr要素
利用可能な場所	table要素の子として、1つだけ入れられる。ただし、caption要素、colgroup要素、thead要素より後ろに入れ、tbody要素、tr要素よりも前に入れる。
開始タグ	必須
終了タグ	該当のtfoot要素の直後にtbody要素来る場合、または該当のtfoot要素が親要素の中で最後の要素となる場合に省略できる。
要素固有のコンテンツ属性	なし
デフォルトスタイル	tfoot{ display:table-footer-group; vertical-align:middle; border-color:inherit; }

tfoot要素は、テーブルのフッタとなる行グループを表します。テーブルの最後にふさわしい、テーブルの各行をまとめるようなデータを入れます。

■利用例

  <table>
  	<caption>クラス表</caption>
  	<thead>
  		<tr>
  			<th>クラス</th>
  			<th>性別</th>
  			<th>人数</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td rowspan="2">Aクラス</td>
  			<td>男</td>
  			<td>23人</td>
  		</tr>
  		<tr>
  			<td>女</td>
  			<td>25人</td>
  		</tr>
  	</tbody>
  	<tbody>
  		<tr>
  			<td rowspan="2">Bクラス</td>
  			<td>男</td>
  			<td>21人</td>
  		</tr>
  		<tr>
  			<td>女</td>
  			<td>26人</td>
  		</tr>
  	</tbody>
  	<tfoot>
  		<tr>
  			<td rowspan="2" class="tlt">性別小計</td>
  			<td>男</td>
  			<td>44人</td>
  		</tr>
  		<tr>
  			<td>女</td>
  			<td>51人</td>
  		</tr>
  		<tr>
  			<td colspan="2" class="tlt">合計</td>
  			<td>95人</td>
  		</tr>
  	</tfoot>
  </table>

利用例をブラウザ上でレンダリングすると次の図のようになります。なお、テーブルはスタイルを設定しています。

利用例では、クラスの人数の集計を行っています。通常、表内の合計結果は表の最後に表記されるものなので、フッタ行のグループとして定義するとセマンティクス上、正しい表記となります。

また、このような場合tfoot要素をtbody要素の前にマークアップしても構いません。それをブラウザ上でレンダリングしても、tfoot要素内のコンテンツの結果は上の利用例と同じようにレンダリングされます。いずれの場合も、tfoot要素でマークアップされた行グループは、テーブルの最後に表示されることになります。

tr要素（テーブルの行）

カテゴリ	なし
コンテンツモデル	thead要素の中で使う場合は、0個以上のth要素。そうでなければ、0個以上のth要素またはtd要素。
利用可能な場所	thead要素、tbody要素、tfoot要素、table要素の子として利用。ただし、table要素の子として使う場合は、caption要素、colgroup要素、thead要素より後ろに入れなければならない。そして、その場合はtable要素の中でtbody要素を使うことはできません。
開始タグ	必須
終了タグ	該当のtr要素の直後に別のtr要素来る場合、または該当のtr要素が親要素の中で最後の要素となる場合に省略できる。
要素固有のコンテンツ属性	なし
デフォルトスタイル	tr{ display:table-row; vertical-align:inherit; border-color:inherit; }

tr要素はテーブルの行を表します。テーブルの横1列分のセルを表すtd要素やth要素を入れます。ただし、tr要素をthead要素の中で使う場合は、そのtr要素の中にはth要素しか入れることができません。

td要素（テーブルのデータセル）

カテゴリ	セクショニング・ルート
コンテンツモデル	フロー・コンテンツ
利用可能な場所	tr要素の子として利用
開始タグ	必須
終了タグ	該当のtd要素の直後に別のtd要素来る場合、または該当のtd要素が親要素の中で最後の要素となる場合に省略できる。
要素固有のコンテンツ属性	colspan（該当のセルが及ぶ範囲の列数を指定） rowspan（該当のセルが及ぶ範囲の行数を指定） headers（該当のセルに対応するヘッダ・セルのidコンテンツ属性の値を指定）
デフォルトスタイル	td{ display:table-cell; padding:1px; vertical-align:inherit; border-color:gray; }

td要素は、テーブルのデータ・セルを表し、そのセルの中にデータとなるコンテンツを入れます。td要素のカテゴリはセクショニング・コンテンツなので、たとえtd要素の中にh1要素などの見出し要素を入れたとしても、そのドキュメントのアウトラインに現れることはありません。

★ colspanコンテンツ属性とrowspanコンテンツ属性

td要素に固有のコンテンツ属性として、colspanとrowspanコンテンツ属性があります。colspanコンテンツ属性は該当のセルが及ぶ範囲の列数を表し、rowspanコンテンツ属性は該当のセルが及ぶ範囲の行数を表します。ただし、これらコンテンツ属性の値には1以上の整数を入れる必要があります。また、これらのコンテンツ属性はtd要素だけではなく、th要素でも利用できます。

■利用例

  <table>
  	<caption>クラス表</caption>
  	<thead>
  		<tr>
  			<th rowspan="2">クラス</th>
  			<th colspan="2">人数</th>
  		</tr>
  		<tr>
  			<th>男</th>
  			<th>女</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>Aクラス</td>
  			<td>23人</td>
  			<td>25人</td>
  		</tr>
  	</tbody>
  	<tbody>
  		<tr>
  			<td>Bクラス</td>
  			<td>21人</td>
  			<td>26人</td>
  		</tr>
  	</tbody>
  	<tfoot>
  		<tr>
  			<td class="tlt">性別小計</td>
  			<td>44人</td>
  			<td>51人</td>
  		</tr>
  		<tr>
  			<td class="tlt">合計</td>
  			<td colspan="2" >95人</td>
  		</tr>
  	</tfoot>
  </table>

利用例をブラウザ上でレンダリングすると次の図のようになります。なお、テーブルはスタイルを設定しています。

利用例のテーブルは、列3、行6のグリッドで構成されています。合計18個のセルを持つテーブルとなりますが、colspanコンテンツ属性、rowspanコンテンツ属性を使うことで、1つのセルが複数のセルをまたがるようにすると、その分だけセル要素（td要素またはth要素）の数が減ります。

th要素（テーブルのヘッダセル）

カテゴリ	なし
コンテンツモデル	フレージング・コンテンツ
利用可能な場所	tr要素の子として利用
開始タグ	必須
終了タグ	該当のth要素の直後に別のth要素またはtd要素が来る場合、または該当のth要素が親要素の中で最後の要素となる場合に省略できる。
要素固有のコンテンツ属性	colspan（該当のセルが及ぶ範囲の列数を指定） rowspan（該当のセルが及ぶ範囲の行数を指定） headers（該当のセルに対応するヘッダ・セルのidコンテンツ属性の値を指定） scope（該当のヘッダ・セルがカバーするセルの範囲を表すキーワードを指定）
デフォルトスタイル	th{ display:table-cell; padding:1px; vertical-align:inherit; text-align:center; font-weight:bold; border-color:gray; }

th要素は、テーブルの見出しに該当するセルとなり、テーブルのヘッダ・セルを表します。
この要素には、td要素と同じようにcolspanとrowspan、headerコンテンツ属性を利用することができます。

★ scopeコンテンツ属性

scopeコンテンツ属性は、th要素と、それがカバーするセルを結びつけるために使います。headerコンテンツ属性も同じ目的に使いますが、結びつける方向が逆になります。headerコンテンツ属性は、結び付けられるセルの方から、そのヘッダ・セルを個別に指定します。それに対して、socpeコンテンツ属性は、ヘッダ・セルの方から、それが結びつくセルの範囲を指定するものです。また、scopeコンテンツ属性は、個々のセルを明示的に指定することはできません。

scopeコンテンツ属性は、所定のキーワードが規定された列挙属性です。指定するキーワードは以下の表を参照してください。

キーワード	意味
row	同じ行の後続のセルを結びつける
col	同じ列の後続のセルを結びつける
rowgroup	同じ行グループの残りのセルを結びつける
colgroup	同じ列グループの残りのセルを結びつける

★ rowとcolキーワード

scopeコンテンツ属性のrowキーワードとcolキーワードが、該当のヘッダ・セルが右に並んでいるセルのヘッダなのか、下に並んでいるセルのヘッダなのかを明示的に指定します。

■利用例

  <table>
  	<caption>クラス表</caption>
  	<thead>
  		<tr>
  			<th scope="row">項目名</th>
  			<th scope="col">男</th>
  			<th scope="col">女</th>
  			<th scope="col">計</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<th scope="row">Aクラス</td>
  			<td>23人</td>
  			<td>25人</td>
  			<td>48人</td>
  		</tr>
  	</tbody>
  	<tbody>
  		<tr>
  			<th scope="row">Bクラス</td>
  			<td>21人</td>
  			<td>26人</td>
  			<td>47人</td>
  		</tr>
  	</tbody>
  </table>

利用例をブラウザ上でレンダリングすると次の図のようになります。なお、テーブルはスタイルを設定しています。

この利用では、すべてのth要素にscopeコンテンツ属性を指定して、それがどの方向にあるセルのヘッダなのかを明示的に指定しています。