HTMLのテーブル表示タグのヘッダとフッタを解説します！「後編」 - IT企業新卒社会人による仕事・筋トレ奮闘blog

HTMLでテーブル表示タグが存在することは知っているけど、実際にコードを書いたことがない方、挙手してください。（以前まで僕もそうでした。）今日はそのような方向けにHTML表示タグの応用編を解説（主にヘッダとフッタについて）します。皆さんも一緒に手を動かしながらついてきてください！前編をまだ見ていない方はこちらからどうぞ

前回のまとめ
コーディングする前に
ヘッダとフッタ
- ヘッダ
- フッタ

前回のまとめ

point

・テーブルの基本はtd、tr、tableタグ
・セルをtdタグで囲む
・複数のtdタグをtrタグで囲むことで行になる
・行であるtrタグを積み重ねることでテーブルとなる

コーディングする前に

HTMLのテーブルには、ヘッダ（header）とフッタ（footer）を指定することができます。ヘッダ行が他の行(body行)と同じような指定(書式)になってしまうのは見栄えやSEOの観点からよろしくないですよね。そこでヘッダ行とフッタ行の指定の仕方を説明します。まずは復習がてらヘッダとフッタの説明を行いますね。

ヘッダ：そのデータに関する説明書きが書いてある部分で、テーブルで先頭行の説明書きにあたります。（例）：「学籍番号」「氏名」「生年月日」等
フッタ：フッタとは、テーブルの下端部のことで、本文など主な内容以外の補助的な内容を記すために設けられるものです。具体的に何が記載されるかは文書の種類によって異なります。

ヘッダとフッタ

それでは実装からやっていきましょう。先にポイントをまとめておきますね。以下の通りです。

point

・ヘッダのセルはthタグを使う
・ヘッダ行はthタグをtheadタグで囲む
・ボディ行はtrタグをtbodyタグで囲む
・フッタ行はtrタグをtfootタグで囲む

それでは実際にサンプルコードを書いていきましょう。皆さんも手を動かしながらやってみましょうね

ヘッダ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テーブル表示タグの基本</title>
</head>
<body>
    <h1>学生リスト</h1>
    <table border="1">
        <thead>
            <th scope="col">学籍番号</th>
            <th scope="col">氏名</th>
            <th scope="col">生年月日</th>
        </thead>
        <tbody>
            <tr>
                <td>1524657</td>
                <td>田中康子</td>
                <td>2016年3月1日</td>
            </tr>
            <tr>
                <td>1524658</td>
                <td>中田英寿</td>
                <td>2017年9月17日</td>
            </tr>
            <tr>
                <td>1524659</td>
                <td>山田太郎</td>
                <td>2016年12月18日</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

前編から加えられたコードを赤太字で書いています。ヘッダを記述する際の基本は、うえで書いたようにヘッダにするセルをthタグで囲むことです。この時にthタグの属性値としてscopeを記述します。この属性の記述は省略可能ですが、記述することによってそのヘッダセルが列（=Column）のヘッダなのか行(=Row)のヘッダなのかをはっきりと示すことができます。なお、サンプルコードの場合は列のヘッダであるため属性値としてcolと記述しています。
このように、thタグを使うだけでも十分ヘッダとして認識されますが、さらに行そのものをヘッダとしてブラウザに認識させたい場合は、theadタグでthタグ全体を囲みます。そして最後に、残りのボディ部分をtbodyタグで囲んで完成です。これらのタグを導入することによってテーブルの構造をはっきりさせることができます。
出力結果は以下のようになります。

フッタ

最後にテーブルのフッタについても記述していきましょう。ボディ行とは明らかに違う性質をもった表なので、コーディングをする際も区別しておいたほうが良いですよね。実際の記述の仕方としては、ヘッダと類似しており、trタグをtfootタグで囲みます。ではサンプルコードにフッタを付け加えてみましょう。今回は学生の総人数「3」を付け加えてみようと思います。ではコードが追加されたものを見てみましょう。

        <!-- ～～省略 -->
        </tbody>
        <tfoot>
            <tr>
                <td>総人数</td>
                <td>3</td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

ブラウザでの出力結果は以下のようになります。

しっかりとフッターが追加されていますね。
ところでソースコード中の青太字部分に注目してください。このセルはもともと表示させるものがありません。そのような場合はうえで書いたように開始タグと終了タグの間に何も記述しない方法もあります。しかしながら、この記述ではうまく表示されないことがあります。これを避けるためには半角スペース「&nbsp:」を記述しておいたほうが無難です。

最後までこの記事を読んでくださった皆様、ありがとうございました。
それでは次回のブログで会いましょう！ twitterのフォローはこちらから！@codingblogg

HTML,CSS初学者の方が最初に読むべきページはこちらからどうぞ！