SYNCER

SYNCER

＜tbody要素＞ - テーブルのボディ

公開日:

tbody要素は、テーブルのボディを表す要素です。テーブルの中でボディにあたる行を任意の数だけ含めます。

概要

名前
tbody (Table body)
カテゴリー
なし。
配置できる場所
table要素の子要素として、caption要素、colgroup要素、thead要素よりも後に配置すること。ただし、同じtable要素の子要素にtr要素があってはいけない。
コンテンツモデル
0個以上のtr要素。
タグの省略
最初の子要素がtr要素で、かつ、直前に終了タグを省略したthead要素、tbody要素、tfoot要素がない場合、開始タグを省略できる。
別のtbody要素、またはtfoot要素が後に続く場合、終了タグを省略できる。
親要素にこれ以上コンテンツがない場合、終了タグを省略できる。
DOM Interface
HTMLTableSectionElement
デフォルトのスタイル
tbody {
	display: table-row-group;
	vertical-align: middle;
	border-color: inherit;
}
仕様書
https://html.spec.whatwg.org/multipage/tables.html#the-tbody-element

属性

グローバル属性

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

サンプルコード

HTML

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

			table, th, td {
				border: 1px solid #000 ;
			}

			tbody {
				color: red ;
			}
		</style>
	</head>
	<body>

<p>tbody要素は、テーブルのボディとなる行をマークアップするための要素です。</p>
<p>このデモではヘッダーの行を赤文字にしています。</p>

<table>
	<!-- ヘッダー -->
	<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>

	</body>
</html>

デモを開く

デモ

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

<body> <div id="___body">

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

<style>

</style>

<script>

</script>