table要素

table要素は、表（テーブル）の大枠を表す要素。

カテゴリー フロー・コンテンツ。パルパブル・コンテンツ。
コンテキスト フロー・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル

下記の要素を、下記の順番で内包できる。

  1. ０個以上１個未満のcaption要素。
  2. ０個以上のcolgroup要素。
  3. ０個以上１個未満のthead要素。
  4. ０個以上１個未満のtfoot要素。
  5. ０個以上のtbody要素。
  6. １個以上のtr要素。

もしくは、

  1. ０個以上１個未満のcaption要素。
  2. ０個以上のcolgroup要素。
  3. ０個以上１個未満のthead要素。
  4. ０個以上のtbody要素。
  5. １個以上のtr要素。
  6. ０個以上１個未満のtfoot要素。
属性 グローバル属性。
border属性。
ブラウザ対応

要点

  • table要素は、表（テーブル）の大枠を示す要素である。
  • table要素内には、行を示すtr要素、セルを示すtd要素などを配置する。
  • table要素の子要素は、下記の配置順で配置する必要がある。

配置順①

  1. ０個以上１個未満のcaption要素。
  2. ０個以上のcolgroup要素。
  3. ０個以上１個未満のthead要素。
  4. ０個以上１個未満のtfoot要素。
  5. ０個以上のtbody要素。
  6. １個以上のtr要素。

配置順②

  1. ０個以上１個未満のcaption要素。
  2. ０個以上のcolgroup要素。
  3. ０個以上１個未満のthead要素。
  4. ０個以上のtbody要素。
  5. １個以上のtr要素。
  6. ０個以上１個未満のtfoot要素。

属性

任意属性

属性 説明
border属性 レイアウト目的にtable要素を使っているのではないことを明示的に示す属性。

サンプルコード

シンプルな表

<table>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>

グループ分け

colgroup要素、thead要素、tbody要素、tfoot要素を使い、行やセルをグループ分けできる。

<table>
	<colgroup span="1"></colgroup>
	<colgroup span="2"></colgroup>
	<thead>
		<tr>
			<th>見出しセル</th>
			<th>見出しセル</th>
			<th>見出しセル</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tfoot>
</table>

表のタイトルを指定

caption要素で、表のタイトルを指定できる。

<table>
	<caption>表のタイトル</caption>
	<tr>
		<th>見出しセル</th>
		<th>見出しセル</th>
		<th>見出しセル</th>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>

サンプル

シンプルな表

HTMLソースコード
<table border="1">
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>
実際の表示
セル セル セル
セル セル セル

表タイトル付加、及び、グループ分け

HTMLソースコード
<table border="1">
	<caption style="background-color: red">表のタイトル</caption>
	<colgroup span="1" style="background-color: lime"></colgroup>
	<colgroup span="2" style="background-color: aqua"></colgroup>
	<colgroup span="2" style="background-color: silver"></colgroup>
	<thead style="background-color: fuchsia">
		<tr>
			<th>見出しセル</th>
			<th>見出しセル</th>
			<th>見出しセル</th>
			<th>見出しセル</th>
			<th>見出しセル</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tfoot style="background-color: yellow">
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tfoot>
</table>
実際の表示
表のタイトル
見出しセル 見出しセル 見出しセル 見出しセル 見出しセル
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル