33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

表のヘッダーとフッターについて

本日の教材動画はこちら 

 

表(テーブル)タグについては前回勉強しましたが、今回はそこに追加できる要素としてテーブルのヘッダーとフッター、それとボディタグについて勉強します。

 

ヘッダーとボディについてはなんとなくわかるんですが、フッターってなんぞ??って思って調べてみたら、主にリンクやコピーライトなど、本文より下に表示される部分の事らしいですね。Excel的考えで行くといつも変わらず挿入する部分って認識でいいのかな!

<thead>タグ

テーブルにおけるヘッダータグ。タイトル部分に利用する。使い方は<thead></thead>で、trタグを挟むようにして使う。1テーブルにつき1個配置可能。

<tbody>タグ

テーブルにおけるボディタグ。表の内容部分に使う。使い方は<tbody></tbody>でtrタグを挟むようにして使う。内容を区切りたい場合など、配置はいくつしてもOK。

<tfoot>タグ

テーブルにおけるフッタータグ。テーブルの最後に利用する。最後のまとめや一言挿入などに利用。使い方は<tfoot></tfoot>でtrタグを挟むようにして使う。1テーブルにつき1個配置可能。tdタグ内で改行などもしてOK。

セルを繋ぎたい場合

セルを繋ぎたい場合(Excelでいうセル結合)は、繋ぎたい箇所に colspan="数字" をつけ足せば結合させることができる。数字部分は繋げたい数で、2列の表の1か所を1列にしたい場合は <td colspan="2"> と入力すれば、2列結合の意味になる。

テーブルタイトルについて

前回テーブルのタイトルはthタグと勉強したが、参考サイトを色々みていたら テーブル自体にタイトルをつけるタグ、つまり「表題」タグが存在したので紹介。

<caption>要素について

使い方は<caption></caption>で、テーブルタグ直下に置く。表題タグのため1つだけ配置可能。表題の下にテーブル内容の説明などを入れたい場合は<p>タグなどで改行することも可能。その場合表題文字部分は<strong>で囲い強調してあげるといい。

 

テーブルタグに関しては私の語彙力と理解が足りず文字で説明が難しいため、下記のタグ内容と出来上がったページを照らし合わせて確認するとわかりやすいかもです。

 

今回勉強した内容

今回勉強した内容

 

出来上がったページ

出来上がったページ



【参考サイト】TAG index - 表を作る