tbody « webmas.jp

tbody

<tbody> 要素は表（テーブル）の本体部分を示します。<thead>、<tfoot> 等と組み合わせて使用すると構造や意味付けが明確化しアクセシビリティも向上します。

分類: なし
内包できるもの: <tr>

属性

グローバル属性のみ

サンプル

<thead> と <tbody> の組み合わせ

HTML

<table>
	<thead>
		<tr>
			<th>メーカー</th>
			<th>モデル</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Apple</td>
			<td>iPhone</td>
		</tr>
		<tr>
			<td>Microsoft</td>
			<td>Surface Duo</td>
		</tr>
	</tbody>
</table>

CSS

スタイルなしの場合、境界線が表示されず見にくいためいくつか CSS を指定します。

table {
	border: 2px solid #333333;
	border-collapse: collapse;
}

thead {
	background-color: #cccccc;
}

th, td {
	border: 1px solid #333333;
	padding: 5px;
}

プレビュー