HTML STUDY

テーブルの構成をグループ分け

<table>の表を、<thead>、<tbody>、<tfoot>の3つのグループに分けていく解説をしていきます。

テーブルの構成を3つに分ける

<caption>はテーブルのタイトルになります。<thead>は、テーブルの見出し行を意味し、<tbody>は、テーブルの本体部分を表します。<th>はテーブルの見出しセルを表します。

<tfoot>は、テーブルの表の要約(合計値など)を表すために使用します。また、<thead>と<tfoot>はHTMLコード内において、<tbody>の前や、後に記入しても、表の始めと最後に表示されます。

要素解説
<caption>テーブルのタイトル
<thead>テーブルのヘッダー
<th>見出しセル
<tfoot>テーブルのフッター
<tbody>テーブルの本体
CSSプロパティ解説
border枠線
<table>

<caption>テーブル例題</caption>

<thead>
<tr>
<th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th>
</tr>
</thead>

<tfoot>
<tr>
<td>フッター1</td><td>フッター2</td><td>フッター3</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>セル1</td><td>セル2</td><td>セル3</td>
</tr>
<tr>
<td>セル4</td><td>セル5</td><td>セル6</td>
</tr>
</tbody>

</table>
@charset "utf-8";

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

ブラウザ表示例

テーブル例題
ヘッダー1ヘッダー2ヘッダー3
フッター1フッター2フッター3
セル1セル2セル3
セル4セル5セル6

テーブル 関連記事