table要素

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

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

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

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

もしくは、

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

要点

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

配置順①

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

配置順②

  1. 0個以上1個未満のcaption要素
  2. 0個以上のcolgroup要素
  3. 0個以上1個未満のthead要素
  4. 0個以上のtbody要素
  5. 1個以上のtr要素
  6. 0個以上1個未満の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>
実際の表示
表のタイトル
見出しセル 見出しセル 見出しセル 見出しセル 見出しセル
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル