カテゴリー

キーワード

 
> table要素の行(横方向)をグ...

table要素の行(横方向)をグループ化します(thead、tbody、tfoot)【HTML5 実践編】


2015 年 3 月 20 日 投稿    view: 8003
タグ:
このエントリーをはてなブックマークに追加

thead,tbody,tfoot

こんにちは、WEBマーケティング部の杉尾です。


前回、table要素の装飾について紹介するとお約束しましたが、よく考えたらちゃんと説明していない要素があったので、そちらを二回に分けて紹介しながら装飾の話もしていきたいと思います。


今回はtbody,thead,tfootについて、次回はcolgroup,colについて、です。



thead tbody tfoot

そもそもthead tbody tfootは、横行を意味的なまとまりとしてグループ分けするためにつけるものです。
HTML5で推奨されている『セマンティックな文書構造』という考え方にも合致します。


また、『thead』(ヘッダ部分)『tbody』(本体部分)『tfoot』(フッタ部分)と分けることで装飾(CSS)もつけやすくなります。


セマンティックWeb・・・コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語。


では、それぞれのルールを見て行きましょう。


thead

1つのtableに1つしか入れられません
tbody、tfootより前に配置しなければなりません。


tbody

1つのtableにいくつでも使えます


tfoot

1つのtableに1つしか入れられません
tbodyの前に置くこともできます。
ソース上でtbodyの前に置いても、ブラウザ上では最下部に表示されます。
(一部の古いブラウザでは表示も先に来ることがあります)


では、参考ソースをどうぞ。


参考ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-language" content="jp">
<title>tbody,thead,tfoot</title>
<style>
.test_table {
    width:700px;
    height:500px;
    border:2px solid #777777;
    border-collapse:collapse;
}
.test_table tr th, .test_table tr td {
    border:1px solid #777777;
    padding:10px;
}
.test_table thead tr {
    background-color:#e74c3c;
    color:#ffffff;
}
.test_table tbody tr {
    background-color:#f2f2f2;
}
.test_table tfoot tr {
    background-color:#444444;
    color:#ffffff;
}
.price {
    color:#ff0000;
    font-weight:bold;
}
</style>
</head>
<body>
    <table class="test_table">
        <caption>SceneLife食堂2月度</caption>
        <thead>
            <tr>
                <th></th>
                <th>メニュー</th>
                <th>価格</th>
                <th>注文数</th>
                <th>売上</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="2">食べ物</th>
                <td>カツ丼</td>
                <td>800</td>
                <td>50</td>
                <td>40,000</td>
            </tr>
            <tr>
                <td>サーロインステーキ</td>
                <td class="price">1,500</td>
                <td>20</td>
                <td>30,000</td>
            </tr>
            <tr>
                <th rowspan="2">飲み物</th>
                <td>烏龍茶</td>
                <td>200</td>
                <td>60</td>
                <td>12,000</td>
            </tr>
            <tr>
                <td>オレンジジュース</td>
                <td>200</td>
                <td>10</td>
                <td>2,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
            <th colspan="3">合計</td>
                <td>140</td>
                <td>84,000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

thead,tbody,tfootの説明画像


解説

本来、装飾部分のCSSは外部スタイルシートとして分けるべきですが、今回はわかりやすいように同ソース中に書きました。


赤い背景の部分がthead、薄いグレーの背景がtbody、黒い背景の部分がtfootです。
ソースと画像を見比べながら、テーブルがどういった構造になっているか確認してください。


前回に比べると複雑な構造にはなっていないので、ご理解いただけると思います。


49、62行目のrowspanは縦列2列分という指定です。
77行目のcolspanは横行3行分という指定です。


36行目 テーブル自体にグローバル属性のclassをつけています。
クラス名は『test_table』です。
このクラスに対して、CSSで装飾を付けていきます。


8行目 クラス名の前に『.』(半角ピリオド)を付けます。
これはCSSの決まりなので必ず付けてください。(idであれば『#』が必須)
テーブル全体についての装飾です。


9行目 widthでテーブルの横幅を決めています。700pxです。
10行目 heightでテーブルの高さを決めています。500pxです。
11行目 boederでテーブルに枠線をつけます。 『線の幅 線の種類 色』
12行目 border-collapse:collapse; でテーブルの線とth、tdの線をくっつけています。


14行目 thとtdにスタイルをつけるときは、構造に沿ってこのように書くと適用されます。
16行目 padding:10px;でth、td内の内側に余白を作っています。


19、23、26行目 background-colorで背景色を指定しています。それぞれカラーコードで指定します。
20、27行目 colorで文字色を指定しています。#ffffffは白です。


57行目 class="price"をつけて、30、31行目で文字色、赤とフォントの太さを指定しています。


*********************************************
CSSの書き方は、 セレクタ {プロパティ名:値;} です。


セレクタ(selector)とはスタイルを適用する要素のことで、プロパティ(property)とはスタイルの種類のことです。
セレクタの後を{}で囲い、その中ではプロパティと値の間に『:』、最後に『;』をつける決まりがあります。


これはいずれCSSを紹介するときに詳しく説明させていただきます。


【追記】記事UPしました。 下記からどうぞ。


【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選


*********************************************


まとめ

グループ分けすると、一気にCSSを設定できるのがいいですね。


次回は縦列をグループ分けする要素、colgroup,colを紹介します。


【追記】下記、続きです。

table要素の列(縦方向)をグループ化します(colgroup、colspan)【HTML5 実践編】


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事