HTML

【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要素を使用しても見た目の変化はありません。

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

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

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

まとめ

  • caption要素でテーブルのタイトルを設定できる
  • thead要素で見出しのtr要素をグループ化できる
  • tbody要素で表の本体部分のtr要素をグループ化できる
  • tfoot要素でフッターのtr要素をグループ化できる
  • table要素内の各要素には配置する順番がある

テーブルの作り方1
【table / tr / th / td】テーブルの作り方(1)table要素、tr要素、th要素、td要素を使った基本的なテーブルの作り方のまとめです。...
ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました