SYNCER

SYNCER

＜table要素＞ - テーブル

公開日:

table要素は、表を作成するための要素です。

概要

名前
table
カテゴリー
Flow content
Palpable content
配置できる場所
Flow contentが期待される場所。
コンテンツモデル
任意でcaption要素、それに続く0個以上のcongroup要素、任意でそれに続くthead要素、それに続く0個以上のtbody要素、または1個以上のtr要素、任意でそれに続くtfoot要素。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLTableElement
デフォルトのスタイル
table {
	display: table;
	border-collapse: separate;
	border-spacing: 2px;
	border-color: grey;
}
仕様書
https://html.spec.whatwg.org/multipage/tables.html#the-table-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

ルール

table要素の中身は、順番を守って子要素を配置していかなければいけません。そのルールは次の通りです。例えば、caption要素は最初の子要素としてのみ配置できます。

  1. 0個、または1個のcaption要素。
  2. 0個以上のcolgroup要素。
  3. 0個、または1個のthead要素。
  5. 0個、または1個のtfoot要素。

行

table要素の使い方は簡単です。セル(td要素)を任意の数だけ用意して、それをtr要素でまとめて下さい。それが1つの行になります。行を集めれば、テーブルになります。ちなみにセルとは項目のことです。当然ですが、セルの個数を合わせないと表示が崩れてしまいます。

HTML

<table>
	<!-- 1つ目の行 (セルをまとめる) -->
	<tr>
		<!-- 3個のセル -->
		<td>リンゴ</td>
		<td>赤</td>
		<td>果物</td>
	</tr>

	<!-- 2つ目の行 (セルをまとめる) -->
	<tr>
		<!-- 3個のセル -->
		<td>キャベツ</td>
		<td>緑</td> 
		<td>野菜</td>
	</tr>
</table>

デモを開く

ヘッダーセル

ヘッダーの役割を果たすセルだけは、td要素ではなく、th要素を使います。ヘッダーセルは先頭の行だけでなく、もちろん、各行の先頭にも配置できます。

HTML

<table>
	<!-- 1つ目の行 -->
	<tr>
		<th>名前</th>
		<th>色</th>
		<th>種類</th>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<td>リンゴ</td>
		<td>赤</td>
		<td>果物</td>
	</tr>

	<!-- 3つ目の行 -->
	<tr>
		<td>キャベツ</td>
		<td>緑</td>
		<td>野菜</td>
	</tr>
</table>

デモを開く

キャプション

caption要素を利用することで、テーブルの上部(枠外)に見出しや説明を表示することができます。利用するときは、先頭に配置しなければいけません。下記の例では見出しと説明文を含めていますが、単純に見出しのテキストだけを含めても大丈夫です。

HTML

<table>
	<!-- キャプション -->
	<caption>
		<strong>テーブルの見出し</strong>
		<p>このテーブルを説明する文章です。</p>
	</caption>

	<!-- 1つ目の行 -->
	<tr>
		<th>名前</th>
		<th>色</th>
		<th>種類</th>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<td>リンゴ</td>
		<td>赤</td>
		<td>果物</td>
	</tr>

	<!-- 3つ目の行 -->
	<tr>
		<td>キャベツ</td>
		<td>緑</td>
		<td>野菜</td>
	</tr>
</table>

デモを開く

列のグループ化

colgroup要素やcol要素を利用すると、列(縦方向)に串刺してスタイルを適用することができます。span属性に何列分の縦グループかを指定して下さい。caption要素の直後、ない場合は先頭に配置して下さい。適用できるスタイルは下記の4種類のみです。

  • background
  • border (border-collapse: collapse;の場合のみ)
  • width
  • visibility

HTML

<table>
	<!-- 縦方向に串刺し -->
	<colgroup span="2" class="aaa"></colgroup><!-- 2列分 (1列目と2列目) -->
	<colgroup span="1" class="bbb"></colgroup><!-- 1列分 (3列目) -->

	<!-- 1つ目の行 -->
	<tr>
		<th>名前</th>
		<th>色</th>
		<th>種類</th>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<td>リンゴ</td>
		<td>赤</td>
		<td>果物</td>
	</tr>

	<!-- 3つ目の行 -->
	<tr>
		<td>キャベツ</td>
		<td>緑</td>
		<td>野菜</td>
	</tr>
</table>

デモを開く

CSS

.aaa {
	background-color: red ;
}

.bbb {
	background-color: blue ;
}

列またぎ

td要素やth要素にcolspan属性を指定すると、後続の列にまたがるセルにすることができます。またぐ数だけ、後続のセルを省略しなければいけません。

HTML

<table>
	<!-- 1つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		<td>AAA</td>
		<td>BBB</td>
		<td>CCC</td>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		<td colspan="2">DDD</td>
		
		<td>FFF</td>
	</tr>

	<!-- 3つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		<td>GGG</td>
		<td colspan="2">HHH</td> 
		
	</tr>
</table>

デモを開く

行またぎ

td要素やth要素にrowspan属性を指定すると、後続の行にまたがるセルにすることができます。またぐ数だけ、後続のセルを省略しなければいけません。

HTML

<table>
	<!-- 1つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		<td>AAA</td>
		<td rowspan="3">BBB</td>
		<td>CCC</td>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		<td>DDD</td>
		
		<td>FFF</td>
	</tr>

	<!-- 3つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		<td>GGG</td>
		
		<td>III</td> 
	</tr>
</table>

デモを開く

アウトライン

人間ではなく、ユーザーエージェントがテーブルの内容をより解釈できるよう、アウトラインを示しましょう。ドキュメントにヘッダー、ボディ、フッターがあるように、テーブルにもヘッダー、ボディ、フッターを定義することができます。方法は簡単で、該当する行を囲むだけです。これらは該当する行がなければ省略してかまいません。

thead要素
ヘッダーにあたる行を任意の数だけ含める。
tbody要素
ボディにあたる行を任意の数だけ含める。
tfoot要素
フッターにあたる行を任意の数だけ含める。

HTML

<p>ヘッダーを赤文字、ボディを青文字、フッターを緑文字で表示しています。</p>

<table>
	<!-- caption要素 -->
	<caption>見出し</caption>

	<!-- colgroup要素 -->

	<!-- ヘッダー -->
	<thead>
		<tr>
			<th>名前</th>
			<th>日付</th>
			<th>点数</th>
		</tr>
	</thead>

	<!-- ボディ -->
	<tbody>
		<tr>
			<td>鈴木</td>
			<td>2015/12/31</td>
			<td>99</td>
		</tr>
		<tr>
			<td>佐藤</td>
			<td>2016/03/12</td>
			<td>63</td>
		</tr>
		<tr>
			<td>田中</td>
			<td>2013/09/21</td>
			<td>77</td>
		<tr>
	</tbody>

	<!-- フッター -->
	<tfoot>
		<tr>
			<th colspan="2">平均点</th>

			<td>79.6</td>
		</tr>
		<tr>
			<th colspan="2">合計点</th>

			<td>239</td>
		</tr>
	</tfoot>
</table>

デモを開く

注意点があって、tbody要素とtr要素を同じtable要素の子要素にしてはいけません。

HTML

<!-- tbody要素とtr要素は兄弟になってはいけない -->
<table>
	<tbody> ... </tbody>
	<tr> ... </tr>
</table>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜table要素＞ - テーブル</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/table/">
		<style>
			body {
				background-color: #fff ;
			}

			.has-border {
				border-collapse: collapse ;
				width: 80% ;
			}

			.has-border, .has-border th, .has-border td {
				border: 1px solid #000 ;
			}
		</style>
	</head>
	<body>

<p>table要素は、複数の項目を表形式で表示するための要素です。</p>

<h2>デフォルト</h2>
<p>スタイルシートを適用していないデフォルトの表示です。</p>
<table>
	<caption>
		<strong>成績表</strong>
		<p>〜月〜日に行われた架空のテストの成績を表にしています。</p>
	</caption>
	<thead>
		<tr>
			<th>名前</th>
			<th>点数</th>
			<th>ランク</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>鈴木</td>
			<td>86</td>
			<td>B</td>
		</tr>
		<tr>
			<td>田中</td>
			<td>97</td>
			<td>A</td>
		</tr>
		<tr>
			<td>佐藤</td>
			<td>77</td>
			<td>C</td>
		</tr>
		<tr>
			<td>山田</td>
			<td>57</td>
			<td>D</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>あいうえお順</td>
			<td>100点満点中</td>
			<td>Aを最高とした5段階評価</td>
		</tr>
	</tfoot>
</table>

<h2>枠線あり</h2>
<p>スタイルシートで枠線を付けた場合です。</p>
<table class="has-border">
	<caption>
		<strong>成績表</strong>
		<p>〜月〜日に行われた架空のテストの成績を表にしています。</p>
	</caption>
	<thead>
		<tr>
			<th>名前</th>
			<th>点数</th>
			<th>ランク</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>鈴木</td>
			<td>86</td>
			<td>B</td>
		</tr>
		<tr>
			<td>田中</td>
			<td>97</td>
			<td>A</td>
		</tr>
		<tr>
			<td>佐藤</td>
			<td>77</td>
			<td>C</td>
		</tr>
		<tr>
			<td>山田</td>
			<td>57</td>
			<td>D</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>あいうえお順</td>
			<td>100点満点中</td>
			<td>Aを最高とした5段階評価</td>
		</tr>
	</tfoot>
</table>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>