【caption / thead / tbody / tfoot】テーブルの作り方(2)

caption要素で表のタイトルを設定する

caption要素はテーブルのタイトルをあらわす要素です。

table要素の子要素として0～1個使用できます。

また、caption要素はtable要素の1番目の子要素として使用します。

<table>
	<caption>テーブルのタイトル</caption>

tr要素をグループ化する

テーブルには行(tr要素)をグループ化して役割を示す要素があります。

ヘッダーをあらわすthead要素

thead(table header)要素は表のヘッダー部分をあらわす要素です。

見出しとして使用しているtr要素をthead要素でグループ化します。

また、thead要素はtable要素の子要素として0～1個使用することが出来ます。

<thead>
	<tr>
		<th>列の見出し</th>
		<th>列の見出し</th>
	</tr>
</thead>

表の本体をあらわすtbody要素

tbody(table body)要素は表の本体部分をあらわす要素です。

table要素の子要素として0個以上使用することが出来ます。

<tbody>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</tbody>

フッターをあらわすtfoot要素

tfoot(table footer)要素は表のフッター部分をあらわす要素です。

フッターとして使用しているtr要素をtfoot要素でグループ化します。

また、tfoot要素はtable要素の子要素として0～1個使用することが出来ます。

<tfoot>
	<tr>
		<td>フッター</td>
		<td>フッター</td>
	</tr>
</tfoot>

テーブル構成要素の使用順

table要素には下記の順番で要素を記述します。

1. caption要素(0～1個)
2. colgroup要素(0個以上)※今回は説明しませんでした(;^ω^)
3. thead要素(0～1個)
4. tbody要素(0～1個)またはtr要素(1個以上)
5. tfoot要素(0～1個)

実際のコードは下記のようになります。

<table>
	<caption>テーブルのタイトル</caption>
	<thead>
		<tr>
			<th>列の見出し</th>
			<th>列の見出し</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>フッター</td>
			<td>フッター</td>
		</tr>
	</tfoot>
</table>

これをブラウザで確認すると下記のようになります。

caption要素でテーブルのタイトルは表示されますが、thead要素、tbody要素、tfoot要素を使用しても見た目の変化はありません。

テーブルの作り方のまとめ

前回に引き続きテーブルについてまとめました。

テーブルは要素の構造など、慣れるまでは難しく感じるかもしれませんが、しっかりと使えるようにしていきましょう。

【table / tr / th / td】テーブルの作り方(1)table要素、tr要素、th要素、td要素を使った基本的なテーブルの作り方のまとめです。...

みいと

Contact

興味を持ったものをいろいろと勉強しています。