テーブルの構成をグループ分け
<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 |